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