row-dense-packing-003-ref.html (1033B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 .grid { 5 display: grid; 6 background: gray; 7 position: relative; 8 grid-template-rows: repeat(3, 50px); 9 grid-auto-flow: dense; 10 } 11 12 .flex { 13 display: flex; 14 flex-direction: row; 15 } 16 </style> 17 <body> 18 <p>Ensure that dense-packing does not affect the layout when all items are single-spanning.</p> 19 <div class="grid"> 20 <div class="flex"> 21 <div style="background: lightskyblue; width: 20px;" > 22 1 23 </div> 24 <div style="background: brown; width: 10px;"> 25 4 26 </div> 27 <div style="background: red; width: 40px;"> 28 5 29 </div> 30 </div> 31 <div class="flex"> 32 <div style="background: lightcoral; width: 60px;" > 33 2 34 </div> 35 <div style="background: pink; width: 40px;"> 36 6 37 </div> 38 </div> 39 <div class="flex"> 40 <div style="background: lightgreen; width: 60px;"> 41 3 42 </div> 43 <div style="background: yellow; width: 40px;"> 44 7 45 </div> 46 </div> 47 </div> 48 </body> 49 </html>