tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

column-dense-packing-002-ref.html (965B)


      1 <!DOCTYPE html>
      2 <html>
      3 <link rel="help" href="https://drafts.csswg.org/css-grid-3">
      4 <style>
      5 .grid {
      6    display: grid;
      7    background: gray;
      8    position: relative;
      9    grid-template-columns: repeat(3, 50px);
     10    padding: 10px;
     11    grid-auto-flow: dense;
     12 }
     13 </style>
     14 <body>
     15  <p>Ensure that dense-packing packs items in the start-most track opening. Item 6 should go into the left-most track opening.</p>
     16  <div class="grid">
     17    <div>
     18      <div style="background: lightskyblue; height: 20px;" >
     19        1
     20      </div>
     21      <div style="background: yellow; height: 40px;">
     22        6
     23      </div>
     24    </div>
     25    <div style="background: lightcoral; height: 60px;" >
     26      2
     27    </div>
     28    <div style="background: lightgreen; height: 20px;">
     29      3
     30    </div>
     31    <div style="background: brown; height: 10px; grid-column: span 3;">
     32      4
     33    </div>
     34    <div style="background:orchid; height: 10px; grid-column: span 2;">
     35      5
     36    </div>
     37  </div>
     38 </body>
     39 </html>