row-explicit-placement-007-ref.html (1727B)
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, with an orthogonal item.</p> 34 <div id="grid"> 35 <div id="first-item" class="first-track" style="writing-mode: vertical-rl; width: fit-content;"> 36 This is some text 37 </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 id="fourth-item" class="first-track" style="position: relative;">Some larger words in this sentence</div> 41 <div class="second-track">The cat cannot be separated from milk</div> 42 </div> 43 <script> 44 const grid = document.getElementById('grid'); 45 const gridrect = grid.getBoundingClientRect(); 46 // Width of the grid, minus padding. 47 const gridwidth = gridrect.width - 40; 48 49 const element1 = document.getElementById('first-item'); 50 const rect = element1.getBoundingClientRect(); 51 const width = rect.width; 52 53 const element4 = document.getElementById('fourth-item'); 54 const translation = gridwidth - width; 55 element4.style.left = '-' + translation + 'px'; 56 </script> 57 </body> 58 </html>