column-grid-lanes-container-baseline-008-ref.html (1564B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .container { 7 display: flex; 8 gap: 20px; 9 border: 2px solid blue; 10 width: 400px; 11 padding: 10px; 12 font-size: 16px; 13 text-decoration: underline; 14 } 15 16 .multicolumn { 17 column-count: 2; 18 column-width: 100px; 19 column-gap: 10px; 20 border: 1px solid red; 21 background: #f0f0f0; 22 display: inline-block; 23 } 24 25 .multicolumn-item { 26 background-color: transparent; 27 padding: 8px; 28 border: 4px solid navy; 29 break-inside: avoid; 30 margin-bottom: 10px; 31 text-decoration: underline; 32 } 33 34 .multicolumn-item:nth-child(1) { height: 40px; font-size: 20px;color: lightcoral; display: flex; align-items: end; border-color: lightcoral;} 35 .multicolumn-item:nth-child(3) { height: 80px; } 36 .multicolumn-item:nth-child(2) { height: 60px; font-size: 22px;color: greenyellow; border-color: greenyellow;} 37 </style> 38 </head> 39 <body> 40 <div class="container" style="align-items: baseline;"> 41 <div>Ref</div> 42 <div class="multicolumn"> 43 <div class="multicolumn-item" style="margin-bottom: -70px;">Item 1</div> 44 <div class="multicolumn-item">Item 3</div> 45 <div class="multicolumn-item"></div> 46 </div> 47 </div> 48 <div class="container" style="align-items: baseline;"> 49 <div>Ref</div> 50 <div class="multicolumn"> 51 <div class="multicolumn-item" style="margin-bottom: -70px;">Item 1</div> 52 <div class="multicolumn-item">Item 3</div> 53 <div class="multicolumn-item"></div> 54 </div> 55 </div> 56 </body> 57 </html>