column-grid-lanes-container-baseline-006.html (2376B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: align-items:baseline/last baseline with dense packing</title> 6 <link rel="author" title="Yanling Wang" href="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-006-ref.html"> 9 <link rel="stylesheet" href="/fonts/ahem.css"> 10 <style> 11 .container { 12 display: flex; 13 gap: 20px; 14 border: 2px solid blue; 15 padding: 10px; 16 font: 16px/1 Ahem; 17 width: 900px; 18 text-decoration: underline; 19 } 20 21 .first-baseline { 22 align-items: first baseline; 23 } 24 25 .last-baseline { 26 align-items: last baseline; 27 } 28 29 .grid-lanes { 30 display: grid-lanes; 31 grid-template-columns: repeat(4, 80px); 32 grid-auto-flow: dense; 33 gap: 10px; 34 background: #f0f0f0; 35 } 36 37 .grid-lanes-item { 38 background: lightblue; 39 padding: 6px; 40 font-size: 14px; 41 } 42 43 .text-reference { 44 background: yellow; 45 font-size: 10px; 46 padding: 8px; 47 width: 80px; 48 height: 10px; 49 } 50 51 .grid-lanes-item:nth-child(1) { 52 grid-column: 1 / 3; 53 height: 70px; 54 font-size: 20px; 55 background: salmon; 56 } 57 58 .grid-lanes-item:nth-child(2) { 59 grid-column: 2 / 4; 60 height: 60px; 61 background: plum; 62 } 63 64 .grid-lanes-item:nth-child(3) { 65 grid-column: 3 / 4; 66 height: 25px; 67 font-size: 10px; 68 background: peachpuff; 69 } 70 71 .grid-lanes-item:nth-child(4) { 72 height: 40px; 73 font-size: 20px; 74 background: turquoise; 75 } 76 </style> 77 </head> 78 <body> 79 <div class="container first-baseline"> 80 <div class="text-reference">Reference</div> 81 <div class="grid-lanes dense-case-3"> 82 <div class="grid-lanes-item">Item 1</div> 83 <div class="grid-lanes-item">Item 2</div> 84 <div class="grid-lanes-item">Item 3</div> 85 <div class="grid-lanes-item">Item 4</div> 86 </div> 87 </div> 88 <div class="container last-baseline"> 89 <div class="text-reference">Reference</div> 90 <div class="grid-lanes dense-case-3"> 91 <div class="grid-lanes-item">Item 1</div> 92 <div class="grid-lanes-item">Item 2</div> 93 <div class="grid-lanes-item">Item 3</div> 94 <div class="grid-lanes-item">Item 4</div> 95 </div> 96 </div> 97 </body> 98 </html>