tor-browser

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

column-auto-repeat-022.html (887B)


      1 <!DOCTYPE html>
      2 <html>
      3 <title>Auto-fit repeat tracks with fixed size and auto/explicit spanning item placement</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-grid-3">
      5 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
      6 <link rel="match" href="column-auto-repeat-021-ref.html">
      7 <style>
      8 .grid-lanes {
      9    display: grid-lanes;
     10    flow-tolerance: 0;
     11    grid-template-columns: 50px repeat(5, 50px) repeat(auto-fit, 50px);
     12    height: 200px;
     13    width: 500px;
     14    gap: 10px;
     15 }
     16 
     17 .grid-lanes > div {
     18    width: 100%;
     19    height: 100px;
     20    background-color: orange;
     21 }
     22 </style>
     23 <div class="grid-lanes">
     24  <div style="grid-column: span 4;">1</div>
     25  <div style="grid-column: 4 / span 2;">2</div>
     26  <div style="grid-column: 9 / span 2;">3</div>
     27  <div style="grid-column: 7;">4</div>
     28  <div style="grid-column: span 2;">5</div>
     29  <div>6</div>
     30 </div>
     31 </html>