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