column-dense-packing-001-ref.html (1764B)
1 <!DOCTYPE html> 2 <html> 3 <style> 4 html,body { 5 font:15px/1 monospace; 6 } 7 .grid { 8 display: grid; 9 position: relative; 10 grid-template-columns: repeat(3, 50px); 11 grid-auto-flow: dense; 12 } 13 </style> 14 <body> 15 <p>Ensure that dense-packing places items correctly in grid-lanes.</p> 16 <div class="grid"> 17 <div> 18 <div style="background: lightskyblue; height: 20px;" > 19 1 20 </div> 21 <div style="background: red; height: 40px;"> 22 5 23 </div> 24 </div> 25 <div style="background: lightcoral; height: 60px;" > 26 2 27 </div> 28 <div style="background: lightgreen; height: 60px;"> 29 3 30 </div> 31 <div> 32 <div style="background: brown; height: 15px; width: 100px;"> 33 4 34 </div> 35 <div style="background: yellow; height: 40px;"> 36 7 37 </div> 38 </div> 39 <div style="background: pink; height: 45px; grid-column: 3;"> 40 6 41 </div> 42 <div style="background: brown; height: 60px; grid-column: 2 / span 2; margin-top: -10px;"> 43 8 44 </div> 45 <div style="margin-top: 15px;"> 46 <div style="background: blueviolet; height: 12px; grid-column: 2; margin-top: 3px;"> 47 9 48 </div> 49 <div style="background: orange; height: 15px; grid-column: 2;"> 50 10 51 </div> 52 </div> 53 <div style="background: pink; height: 20px; width: 150px; transform: translateY(50px);"> 54 11 55 </div> 56 <div style="background: green; height: 60px; transform: translateY(20px);"> 57 14 58 </div> 59 <div style="background: brown; height: 60px; width: 100px; transform: translateY(20px);"> 60 12 61 </div> 62 <div style="background: pink; height: 20px; width: 150px; transform: translateY(20px); grid-column-start: 1"> 63 13 64 </div> 65 </div> 66 </body> 67 </html>