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