row-explicit-placement-002-ref.html (996B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 5 <style> 6 .grid { 7 display: grid; 8 background: gray; 9 height: 200px; 10 gap: 20px; 11 padding: 20px; 12 } 13 14 .grid > div { 15 width: fit-content; 16 } 17 18 .first-track { 19 background: lightskyblue; 20 grid-row-start: 1; 21 margin: 20px; 22 } 23 24 .second-track { 25 background: lightcoral; 26 grid-row-start: 2; 27 height: 80px; 28 margin-top: 40px; 29 margin-bottom: 80px; 30 } 31 32 .third-track { 33 background: lightgreen; 34 grid-row-start: 3; 35 margin-left: 40px; 36 } 37 </style> 38 <body> 39 <p>Test that grid-lanes items with explicit placement are correctly positioned within the grid axis.</p> 40 <div class="grid"> 41 <div class="first-track">This is some text</div> 42 <div class="second-track">Some larger words in this sentence</div> 43 <div class="third-track">The cat cannot be separated from milk</div> 44 </div> 45 </body> 46 </html>