tor-browser

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

column-dense-packing-multi-span-003.html (972B)


      1 <!DOCTYPE html>
      2 <html>
      3 <link rel="help" href="https://drafts.csswg.org/css-grid-3">
      4 <link rel="match" href="column-dense-packing-multi-span-003-ref.html">
      5 <link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">
      6 <style>
      7 .grid-lanes {
      8    display: grid-lanes;
      9    flow-tolerance: 0;
     10    grid-template-columns: repeat(3, 50px);
     11    padding: 10px;
     12    grid-auto-flow: dense;
     13 }
     14 </style>
     15 <body>
     16  <p>Ensure that dense-packing places items that span more than 1 track correctly into gaps.</p>
     17  <div class="grid-lanes">
     18    <div style="background: lightskyblue; height: 20px;" >
     19      1
     20    </div>
     21    <div style="background: lightcoral; height: 20px;" >
     22      2
     23    </div>
     24    <div style="background: lightgreen; height: 40px;">
     25      3
     26    </div>
     27    <div style="background: brown; height: 10px; grid-column: span 3;">
     28      4
     29    </div>
     30    <div style="background:orchid; height: 10px; grid-column: span 2;">
     31      5
     32    </div>
     33  </div>
     34 </body>
     35 </html>