row-dense-packing-multi-span-003-ref.html (877B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 .grid { 5 display: grid; 6 grid-template-rows: repeat(3, 50px); 7 padding: 10px; 8 grid-auto-flow: dense; 9 } 10 .flex { 11 display: flex; 12 flex-direction: row; 13 } 14 </style> 15 <body> 16 <p>Ensure that dense-packing places items that span more than 1 track correctly into gaps.</p> 17 <div class="grid"> 18 <div class="flex"> 19 <div style="background: lightskyblue; width: 20px;" > 20 1 21 </div> 22 <div style="background:orchid; width: 10px; height: 100px;"> 23 5 24 </div> 25 </div> 26 <div style="background: lightcoral; width: 20px;" > 27 2 28 </div> 29 <div class="flex"> 30 <div style="background: lightgreen; width: 40px;"> 31 3 32 </div> 33 <div style="background: brown; width: 10px; height: 150px; transform: translateY(-100px);"> 34 4 35 </div> 36 </div> 37 </div> 38 </body> 39 </html>