column-grid-lanes-container-baseline-003a.html (2303B)
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-003a-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, 100px); 24 gap: 10px; 25 border: 1px solid red; 26 background: #f0f0f0; 27 } 28 29 .grid-lanes-item { 30 border: 1px solid navy; 31 font-size: 14px; 32 display: flex; 33 align-items: flex-start; 34 text-decoration: underline; 35 } 36 37 .bottom { 38 align-items: flex-end; 39 } 40 41 .text-reference { 42 background: yellow; 43 padding: 8px; 44 text-decoration: underline; 45 } 46 47 .grid-lanes-item:nth-child(1) { 48 height: 30px; 49 background: lightcoral; 50 padding: 4px; 51 } 52 53 .grid-lanes-item:nth-child(2) { 54 height: 80px; 55 background: lightgreen; 56 padding: 4px; 57 } 58 59 .grid-lanes-item:nth-child(3) { 60 height: 50px; 61 background: lightblue; 62 padding: 4px; 63 } 64 65 .grid-lanes-item:nth-child(4) { 66 height: 90px; 67 background: lightpink; 68 padding: 4px; 69 } 70 </style> 71 </head> 72 <body> 73 <div class="container"> 74 <div class="text-reference">Reference Text</div> 75 <div class="grid-lanes"> 76 <div class="grid-lanes-item">Short</div> 77 <div class="grid-lanes-item">Tall</div> 78 <div class="grid-lanes-item">Medium</div> 79 <div class="grid-lanes-item">Tallest</div> 80 </div> 81 <div class="text-reference">Reference Text</div> 82 </div> 83 <div class="container"> 84 <div class="text-reference">Reference Text</div> 85 <div class="grid-lanes"> 86 <div class="grid-lanes-item">Short</div> 87 <div class="grid-lanes-item">Tall</div> 88 <div class="grid-lanes-item">Medium</div> 89 <div class="grid-lanes-item"></div> 90 </div> 91 <div class="text-reference">Reference Text</div> 92 </div> 93 </body> 94 </html>