column-explicit-placement-001.html (1279B)
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-001-ref.html"> 5 <link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> 6 <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> 7 <style> 8 .grid-lanes { 9 display: grid-lanes; 10 background: gray; 11 position: relative; 12 flow-tolerance: 0; 13 width: 240px; 14 gap: 20px; 15 padding: 20px; 16 } 17 18 .first-track { 19 background: lightskyblue; 20 grid-column-start: 1; 21 } 22 23 .second-track { 24 background: lightcoral; 25 grid-column-start: 2; 26 margin-left: 40px; 27 } 28 29 .third-track { 30 background: lightgreen; 31 grid-column-start: 3; 32 margin-top: 40px; 33 margin-right: 40px; 34 } 35 36 .fourth-track { 37 background: purple; 38 grid-column-start: 4; 39 } 40 </style> 41 <body> 42 <p>Test that grid-lanes items with explicit placement are correctly positioned within the grid axis.</p> 43 <div class="grid-lanes"> 44 <div class="first-track">This is some text</div> 45 <div class="second-track">Some larger words in this sentence</div> 46 <div class="third-track">The cat cannot be separated from milk</div> 47 <div class="fourth-track">The cat cannot be separated from milk</div> 48 </div> 49 </body> 50 </html>