column-dense-packing-multi-span-009-ref.html (1420B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 .grid { 5 display: grid; 6 gap: 10px; 7 padding: 10px; 8 grid-template-columns: repeat(4, 60px); 9 grid-auto-flow: dense; 10 } 11 .upwards { 12 transform: translateY(-80px); 13 } 14 </style> 15 <body> 16 <p>Ensure that dense-packing correctly accounts for the gaps between items when placing them in track openings. Items to be placed in track openings are yellow.</p> 17 <div class="grid"> 18 <div style="background: aquamarine; height: 120px;" > 19 1 20 </div> 21 <div style="background: blue; height: 40px;" > 22 2 23 </div> 24 <div style="background: blueviolet; height: 20px;"> 25 3 26 </div> 27 <div style="background: lightsteelblue; height: 60px; grid-column: 4;"> 28 4 29 </div> 30 <div class="upwards" style="background: yellow; height: 10px; grid-column: 2 / span 2;"> 31 10 32 </div> 33 <div class="upwards" style="background: yellow; height: 10px; grid-column: 2 / span 3;"> 34 6 35 </div> 36 <div class="upwards" style="background: yellow; height: 10px; grid-column: 2 / span 3;"> 37 7 38 </div> 39 <div class="upwards" style="background: yellow; height: 10px; grid-column: 2 / span 3;"> 40 8 41 </div> 42 <div class="upwards" style="background: aqua; height: 20px; grid-column: span 4;"> 43 5 44 </div> 45 <div class="upwards" style="background: green; height: 10px; grid-column: span 3;"> 46 9 47 </div> 48 </div> 49 </body> 50 </html>