row-reverse-dense-packing-001-ref.html (1027B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 .grid { 5 display: grid; 6 grid-template-rows: repeat(4, 50px) 15px; 7 grid-template-columns: repeat(2, min-content); 8 gap: 10px; 9 grid-auto-flow: dense; 10 } 11 </style> 12 <body> 13 <p>Test that grid-lanes items with reverse auto placement and explicit placement are correctly positioned within the grid axis during dense-packing.</p> 14 <div class="grid"> 15 <div style="background: lavender; width: 60px; grid-row: 3;"> 16 1 17 </div> 18 <div style="background: lightgreen; width: 60px; grid-row: 1;"> 19 2 20 </div> 21 <div style="background: lightpink; grid-row: 2 / span 4; width: 10px;"> 22 3 23 </div> 24 <div style="grid-row: 4;"> 25 <div style="display: flex; flex-direction: row; height: 100%;"> 26 <div style="background: yellow; width: 20px;"> 27 4 28 </div> 29 <div style="background: yellow; width: 10px; margin-left: 10px; grid-row: 4;"> 30 5 31 </div> 32 </div> 33 </div> 34 <div style="background: yellow; width: 10px; grid-row: 2;"> 35 6 36 </div> 37 </div> 38 </body> 39 </html>