column-grid-lanes-container-baseline-003c.html (2005B)
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-003c-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 black; 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 height: 1px; 58 font-size: 40px; 59 } 60 61 .grid-lanes-item:nth-child(3) { 62 height: 15px; 63 background: transparent; 64 color: red; 65 font-size: 10px; 66 } 67 68 .grid-lanes-item:nth-child(4) { 69 height: 50px; 70 background: lightblue; 71 } 72 </style> 73 </head> 74 <body> 75 <div class="container"> 76 <div class="text-reference">Reference Text</div> 77 <div class="grid-lanes"> 78 <div class="grid-lanes-item">Short</div> 79 <div class="grid-lanes-item">Tall</div> 80 <div class="grid-lanes-item">Tallest</div> 81 <div class="grid-lanes-item"></div> 82 </div> 83 <div class="text-reference">Reference Text</div> 84 </div> 85 </body> 86 </html>