column-dense-packing-003-ref.html (839B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 .grid-lanes { 5 display: grid-lanes; 6 background: gray; 7 flow-tolerance: 0; 8 grid-template-columns: repeat(3, 50px); 9 width: 170px; 10 } 11 </style> 12 <body> 13 <p>Ensure that dense-packing has no impact when all items are single-spanning.</p> 14 <div class="grid-lanes"> 15 <div style="background: lightskyblue; height: 20px;" > 16 1 17 </div> 18 <div style="background: lightcoral; height: 60px;" > 19 2 20 </div> 21 <div style="background: lightgreen; height: 60px;"> 22 3 23 </div> 24 <div style="background: brown; height: 15px;"> 25 4 26 </div> 27 <div style="background: red; height: 40px;"> 28 5 29 </div> 30 <div style="background: pink; height: 40px;"> 31 6 32 </div> 33 <div style="background: yellow; height: 40px;"> 34 7 35 </div> 36 </div> 37 </body> 38 </html>