column-grid-lanes-container-baseline-008.html (1854B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: align-items: baseline/last baseline with negative margin</title> 6 <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment"> 8 <link rel="match" href="column-grid-lanes-container-baseline-008-ref.html"> 9 <style> 10 .container { 11 display: flex; 12 gap: 20px; 13 border: 2px solid blue; 14 width: 400px; 15 padding: 10px; 16 font-size: 16px; 17 text-decoration: underline; 18 } 19 20 .grid-lanes { 21 display: grid-lanes; 22 grid-template-columns: repeat(2, 100px); 23 gap: 10px; 24 border: 1px solid red; 25 background: #f0f0f0; 26 width: max-content; 27 } 28 29 .grid-lanes-item { 30 background: transparent; 31 padding: 8px; 32 border: 4px solid navy; 33 text-decoration: underline; 34 } 35 36 .grid-lanes-item:nth-child(1) { height: 40px; font-size: 20px;color: lightcoral; display: flex; align-items: end; border-color: lightcoral;} 37 .grid-lanes-item:nth-child(2) { height: 80px; } 38 .grid-lanes-item:nth-child(3) { height: 60px; font-size: 22px;color: greenyellow; border-color: greenyellow;} 39 </style> 40 </head> 41 <body> 42 <div class="container" style="align-items: baseline;"> 43 <div>Ref</div> 44 <div class="grid-lanes"> 45 <div class="grid-lanes-item">Item 1</div> 46 <div class="grid-lanes-item"></div> 47 <div class="grid-lanes-item" style="margin-top: -80px;">Item 3</div> 48 </div> 49 </div> 50 <div class="container" style="align-items: last baseline;"> 51 <div>Ref</div> 52 <div class="grid-lanes"> 53 <div class="grid-lanes-item" style="margin-bottom: -80px;">Item 1</div> 54 <div class="grid-lanes-item"></div> 55 <div class="grid-lanes-item">Item 3</div> 56 </div> 57 </div> 58 </body> 59 </html>