row-dense-packing-multi-span-005-ref.html (1464B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 .grid { 5 display: grid; 6 gap: 10px; 7 padding: 10px; 8 grid-template-columns: 80px repeat(4, 10px) 20px 10px; 9 grid-template-rows: repeat(4, 60px); 10 grid-auto-flow: column; 11 } 12 .left { 13 transform: translateX(-40px); 14 } 15 </style> 16 <body> 17 <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> 18 <div class="grid"> 19 <div style="background: aquamarine; width: 120px; grid-row: 1;" > 20 1 21 </div> 22 <div style="background: blue; width: 40px; grid-row: 2;" > 23 2 24 </div> 25 <div style="background: blueviolet; width: 20px; grid-row: 3;"> 26 3 27 </div> 28 <div style="background: lightsteelblue; width: 60px; grid-row: 4;"> 29 4 30 </div> 31 <div class="left" style="background: yellow; width: 10px; grid-row: 2 / span 2;"> 32 10 33 </div> 34 <div class="left" style="background: yellow; width: 10px; grid-row: 2 / span 3;"> 35 6 36 </div> 37 <div class="left" style="background: yellow; width: 10px; grid-row: 2 / span 3;"> 38 7 39 </div> 40 <div class="left" style="background: yellow; width: 10px; grid-row: 2 / span 3;"> 41 8 42 </div> 43 <div class="left" style="background: aqua; width: 20px; grid-row: span 4;"> 44 5 45 </div> 46 <div class="left" style="background: green; width: 10px; grid-row: span 3;"> 47 9 48 </div> 49 </div> 50 </body> 51 </html>