row-explicit-placement-005-ref.html (1649B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 5 <style> 6 #grid { 7 display: grid; 8 grid-template-columns: 200px 200px; 9 background: gray; 10 height: 200px; 11 width: 200px; 12 gap: 20px; 13 padding: 20px; 14 } 15 16 .first-track { 17 background: lightskyblue; 18 grid-row-start: 1; 19 } 20 21 .second-track { 22 background: lightcoral; 23 grid-row-start: 2; 24 height: 200%; 25 } 26 27 .third-track { 28 background: lightgreen; 29 grid-row-start: 3; 30 } 31 </style> 32 <body> 33 <p>Test that grid-lanes items with explicit placement are correctly positioned within the grid axis.</p> 34 <div id="grid"> 35 <div id="first-item" class="first-track" style="width: fit-content">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 id="fourth-item" class="first-track" style="position: relative;">Some larger words in this sentence</div> 39 <div class="second-track">The cat cannot be separated from milk</div> 40 </div> 41 <script> 42 const grid = document.getElementById('grid'); 43 const gridrect = grid.getBoundingClientRect(); 44 // Width of the grid, minus padding. 45 const gridwidth = gridrect.width - 40; 46 47 const first_item = document.getElementById('first-item'); 48 const width = first_item.getBoundingClientRect().width; 49 50 const fourth_item = document.getElementById('fourth-item'); 51 const translation = gridwidth - width; 52 fourth_item.style.left = '-' + translation + 'px'; 53 </script> 54 </body> 55 </html>