tor-browser

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

grid-gap-decorations-054-ref.html (2065B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://www.w3.org/TR/css-gaps-1/">
      3 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
      4 <style>
      5  body {
      6    margin: 0px;
      7  }
      8  .grid {
      9    display: grid;
     10    grid-template: repeat(3, 100px) / repeat(3, 100px);
     11    gap: 20px;
     12    position: relative;
     13  }
     14  .item {
     15    width: 100%;
     16    height: 100%;
     17    background: lightgray;
     18    opacity: 0.8;
     19  }
     20  .col-gaps {
     21    display: flex;
     22    position: absolute;
     23    top: 0;
     24    left: 107px;
     25    column-gap: 114px;
     26  }
     27  .col-gap-1-group {
     28    display: flex;
     29    flex-direction: column;
     30    justify-content: center;
     31    height: 340px;
     32  }
     33  .col-gap {
     34    background: blue;
     35    width: 6px;
     36    height: 100px;
     37  }
     38  .col-gap-2-group {
     39    display: flex;
     40    flex-direction: column;
     41    justify-content: center;
     42    row-gap: 20px;
     43    height: 340px;
     44  }
     45  .row-gaps {
     46    display: flex;
     47    flex-direction: column;
     48    position: absolute;
     49    top: 107px;
     50    left: 0px;
     51    row-gap: 114px;
     52  }
     53  .row-gap-1-group {
     54    display: flex;
     55    flex-direction: row;
     56    justify-content: start;
     57    width: 340px;
     58    column-gap: 20px;
     59  }
     60  .row-gap {
     61    background: red;
     62    width: 100px;
     63    height: 6px;
     64  }
     65  .row-gap-2-group {
     66    display: flex;
     67    flex-direction: row;
     68    justify-content: start;
     69    column-gap: 20px;
     70    height: 340px;
     71  }
     72 </style>
     73 <div class="grid">
     74  <div class="item" style="grid-area: 1 / 1 / 2 / 3"></div>
     75  <div class="item" style="grid-area: 1 / 3 / 4 / 4"></div>
     76  <div class="item" style="grid-area: 2 / 1 / 3 / 2"></div>
     77 
     78  <div class="col-gaps">
     79    <div class="col-gap-1-group">
     80      <div class="col-gap"></div>
     81    </div>
     82 
     83    <div class="col-gap-2-group">
     84      <div class="col-gap"></div>
     85      <div class="col-gap"></div>
     86      <div class="col-gap"></div>
     87    </div>
     88  </div>
     89 
     90  <div class="row-gaps">
     91    <div class="row-gap-1-group">
     92      <div class="row-gap"></div>
     93      <div class="row-gap"></div>
     94    </div>
     95 
     96    <div class="row-gap-2-group">
     97      <div class="row-gap"></div>
     98    </div>
     99  </div>
    100 </div>