row-dense-packing-multi-span-002-ref.html (819B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 .grid { 5 display: grid; 6 grid-template-rows: 10px 10px 20px 15px 5px; 7 grid-auto-flow: column; 8 } 9 .flex { 10 display: flex; 11 flex-direction: row; 12 } 13 </style> 14 <body> 15 <p>Ensure that dense-packing with multi-span items are placed into tracks with the same used size and the same number of tracks.</p> 16 <div class="grid"> 17 <div class="flex"> 18 <div style="background: yellow; width: 20px; height: 20px;" > 19 4 20 </div> 21 <div style="background: lightblue; width: 20px; height: 60px;" > 22 2 23 </div> 24 <div style="background: darkblue; width: 20px; height: 40px;"> 25 3 26 </div> 27 </div> 28 <div style="background: lightskyblue; width: 20px; height: 20px; transform: translateY(10px);" > 29 1 30 </div> 31 </div> 32 </body> 33 </html>