column-grid-lanes-container-baseline-002a-ref.html (2060B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .container { 7 display: flex; 8 align-items: 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 navy; 28 font-size: 14px; 29 display: flex; 30 align-items: flex-end; 31 break-inside: avoid; 32 margin-bottom: 10px; 33 } 34 35 .multicolumn-item:last-child { 36 margin-bottom: 0; 37 } 38 39 .top { 40 align-items: flex-start; 41 } 42 43 .text-reference { 44 background: yellow; 45 padding: 8px; 46 } 47 48 .multicolumn-item:nth-child(1) { 49 height: 30px; 50 background: lightcoral; 51 padding: 4px; 52 } 53 54 .multicolumn-item:nth-child(2) { 55 height: 50px; 56 background: lightblue; 57 padding: 4px; 58 } 59 60 .multicolumn-item:nth-child(3) { 61 height: 80px; 62 background: lightgreen; 63 padding: 4px; 64 } 65 66 .multicolumn-item:nth-child(4) { 67 height: 90px; 68 background: lightpink; 69 padding: 4px; 70 } 71 </style> 72 </head> 73 <body> 74 <div class="container"> 75 <div class="text-reference">Reference Text</div> 76 <div class="multicolumn"> 77 <div class="multicolumn-item">Short</div> 78 <div class="multicolumn-item">Medium</div> 79 <div class="multicolumn-item">Tall</div> 80 <div class="multicolumn-item">Tallest</div> 81 </div> 82 <div class="text-reference">Reference Text</div> 83 </div> 84 <div class="container"> 85 <div class="text-reference">Reference Text</div> 86 <div class="multicolumn"> 87 <div class="multicolumn-item"></div> 88 <div class="multicolumn-item">Medium</div> 89 <div class="multicolumn-item">Tall</div> 90 <div class="multicolumn-item">Tallest</div> 91 </div> 92 <div class="text-reference">Reference Text</div> 93 </div> 94 </body> 95 </html>