row-dense-packing-multi-span-001-ref.html (980B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 .grid { 5 display: grid; 6 grid-template-rows: repeat(4, 50px); 7 grid-auto-flow: dense; 8 } 9 .flex { 10 display: flex; 11 flex-direction: row; 12 } 13 </style> 14 <body> 15 <p>Ensure that dense-packing places multi-spanning item into highest eligible track opening. The yellow item is the item that should be placed in track opening.</p> 16 <div class="grid"> 17 <div class="flex"> 18 <div style="background: lightskyblue; width: 70px;" > 19 1 20 </div> 21 <div style="background: lightsteelblue; width: 20px; height: 200px;" > 22 4 23 </div> 24 </div> 25 <div style="background: yellow; width: 10px; grid-row: span 2;" > 26 5 27 </div> 28 <div class="flex"> 29 <div style="background: lightblue; width: 20px; grid-row: 4;" > 30 2 31 </div> 32 <div style="background: darkblue; width: 20px; height: 100px; grid-row: 3; transform: translateY(-50px);"> 33 3 34 </div> 35 </div> 36 </div> 37 </body> 38 </html>