row-explicit-placement-006-ref.html (1016B)
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 .first-track { 15 background: lightskyblue; 16 grid-row-start: 1; 17 writing-mode: vertical-rl; 18 margin-top: 10px; 19 width: fit-content; 20 } 21 22 .second-track { 23 background: lightcoral; 24 grid-row-start: 2; 25 width: fit-content; 26 } 27 28 .third-track { 29 background: lightgreen; 30 grid-row-start: 3; 31 writing-mode: vertical-lr; 32 width: fit-content; 33 } 34 </style> 35 <body> 36 <p>Test that orthoganal grid-lanes items with explicit placement are correctly positioned within the grid axis.</p> 37 <div class="grid"> 38 <div class="first-track">This is some text</div> 39 <div class="second-track">Some larger words in this sentence</div> 40 <div class="third-track">The cat cannot be separated from milk</div> 41 </div> 42 </body> 43 </html>