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