tor-browser

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

row-dense-packing-multi-span-002.html (972B)


      1 <!DOCTYPE html>
      2 <html>
      3 <link rel="help" href="https://drafts.csswg.org/css-grid-3">
      4 <link rel="match" href="row-dense-packing-multi-span-002-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-lanes-direction: row;
     11    grid-template-rows: 10px 10px 20px 15px 5px;
     12    grid-auto-flow: dense;
     13 }
     14 </style>
     15 <body>
     16  <p>Ensure that dense-packing with multi-span items are placed into tracks with the same used size and the same number of tracks.</p>
     17  <div class="grid-lanes">
     18    <div style="background: lightskyblue; width: 20px; grid-row: 3" >
     19      1
     20    </div>
     21    <div style="background: lightblue; width: 20px; grid-row: span 5" >
     22      2
     23    </div>
     24    <div style="background: darkblue; width: 20px; grid-row: span 3;">
     25      3
     26    </div>
     27    <div style="background: yellow; width: 20px; grid-row: span 2;" >
     28      4
     29    </div>
     30  </div>
     31 </body>
     32 </html>