column-explicit-placement-002-ref.html (900B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <style> 5 .grid { 6 display: grid; 7 background: gray; 8 width: 200px; 9 gap: 20px; 10 padding: 20px; 11 align-items: start; 12 } 13 14 .first-track { 15 background: lightskyblue; 16 grid-column-start: 1; 17 writing-mode: vertical-rl; 18 margin-left: 10px; 19 } 20 21 .second-track { 22 background: lightcoral; 23 grid-column-start: 2; 24 } 25 26 .third-track { 27 background: lightgreen; 28 grid-column-start: 3; 29 writing-mode: vertical-lr; 30 } 31 </style> 32 <body> 33 <p>Test that orthoganal grid-lanes items with explicit placement are correctly positioned within the grid axis.</p> 34 <div class="grid"> 35 <div class="first-track">This is some text</div> 36 <div class="second-track">Some larger words in this sentence</div> 37 <div class="third-track">The cat cannot be separated from milk</div> 38 </div> 39 </body> 40 </html>