row-explicit-placement-007.html (1251B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="match" href="row-explicit-placement-007-ref.html"> 5 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 6 <style> 7 .grid-lanes { 8 display: grid-lanes; 9 grid-auto-flow: column; 10 grid-lanes-direction: row; 11 background: gray; 12 flow-tolerance: 0; 13 height: 200px; 14 width: 200px; 15 gap: 20px; 16 padding: 20px; 17 } 18 19 .first-track { 20 background: lightskyblue; 21 grid-row-start: 1; 22 } 23 24 .second-track { 25 background: lightcoral; 26 grid-row-start: 2; 27 height: 200%; 28 } 29 30 .third-track { 31 background: lightgreen; 32 grid-row-start: 3; 33 } 34 </style> 35 <body> 36 <p>Test that grid-lanes items with explicit placement are correctly positioned within the grid axis, with an orthogonal item.</p> 37 <div class="grid-lanes"> 38 <div class="first-track" style="writing-mode: vertical-rl;">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 class="first-track">Some larger words in this sentence</div> 42 <div class="second-track">The cat cannot be separated from milk</div> 43 </div> 44 </body> 45 </html>