column-grid-lanes-container-baseline-003c-ref.html (1825B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .container { 7 display: flex; 8 align-items: last baseline; 9 gap: 20px; 10 border: 2px solid darkblue; 11 padding: 10px; 12 font: 16px/1 monospace; 13 width: 600px; 14 text-decoration: underline; 15 } 16 17 .multicolumn { 18 column-count: 2; 19 column-width: 100px; 20 column-gap: 10px; 21 border: 1px solid red; 22 background: #f0f0f0; 23 display: inline-block; 24 } 25 26 .multicolumn-item { 27 border: 1px solid black; 28 width: 100px; 29 font-size: 14px; 30 display: flex; 31 align-items: flex-start; 32 break-inside: avoid; 33 margin-bottom: 10px; 34 text-decoration: underline; 35 padding: 4px; 36 } 37 38 .multicolumn-item:last-child { 39 margin-bottom: 0; 40 } 41 42 .bottom { 43 align-items: flex-end; 44 } 45 46 .text-reference { 47 background: yellow; 48 padding: 8px; 49 text-decoration: underline; 50 } 51 52 .multicolumn-item:nth-child(1) { 53 height: 30px; 54 background: lightcoral; 55 } 56 57 .multicolumn-item:nth-child(2) { 58 height: 50px; 59 background: lightblue; 60 } 61 62 .multicolumn-item:nth-child(3) { 63 height: 80px; 64 background: lightgreen; 65 height: 1px; 66 font-size: 40px; 67 } 68 69 .multicolumn-item:nth-child(4) { 70 height: 15px; 71 background: transparent; 72 color: red; 73 font-size: 10px; 74 } 75 </style> 76 </head> 77 <body> 78 <div class="container"> 79 <div class="text-reference">Reference Text</div> 80 <div class="multicolumn"> 81 <div class="multicolumn-item">Short</div> 82 <div class="multicolumn-item"></div> 83 <div class="multicolumn-item">Tall</div> 84 <div class="multicolumn-item">Tallest</div> 85 </div> 86 <div class="text-reference">Reference Text</div> 87 </div> 88 </body> 89 </html>