tor-browser

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

grid-gap-decorations-015-ref.html (2045B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset">
      3 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
      4 <style>
      5  body {
      6    margin-top: 20px;
      7  }
      8 
      9  .grid-container {
     10    display: grid;
     11    grid-template-columns: repeat(4, 1fr);
     12    gap: 10px;
     13    width: 430px;
     14    height: 430px;
     15  }
     16 
     17  .grid-item {
     18    background-color: gray;
     19    opacity: 0.5;
     20    border: 1px solid #000;
     21    z-index: 2;
     22  }
     23 
     24  .col-gap {
     25    width: 0;
     26    border-left: solid 5px blue;
     27  }
     28 
     29  .col-gap1 {
     30 
     31    position: absolute;
     32    top: 110px;
     33    left: 110.5px;
     34    height: 250px;
     35  }
     36 
     37  .col-gap2 {
     38    position: absolute;
     39    top: 0px;
     40    left: 220.5px;
     41    height: 250px;
     42  }
     43 
     44  .col-gap3 {
     45    position: absolute;
     46    top: 0px;
     47    left: 330.5px;
     48    height: 470px;
     49  }
     50 
     51  .row-gap {
     52    height: 0px;
     53    border-bottom: solid 5px red;
     54  }
     55 
     56  .row-gap1 {
     57    position: absolute;
     58    top: 122.5px;
     59    left: 8px;
     60    width: 215px;
     61  }
     62 
     63  .row-gap2 {
     64    position: absolute;
     65    top: 232.5px;
     66    left: 113px;
     67    width: 220px;
     68  }
     69 
     70  .row-gap3 {
     71    position: absolute;
     72    top: 342.5px;
     73    left: 8px;
     74    width: 430px;
     75  }
     76 </style>
     77 
     78 <div class="grid-container">
     79  <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div>
     80  <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div>
     81  <div class="grid-item" style="grid-row: 2 / 4;"></div>
     82  <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div>
     83  <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div>
     84  <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div>
     85  <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div>
     86  <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div>
     87 </div>
     88 
     89 <div class="col-gap col-gap1"> </div>
     90 <div class="col-gap col-gap2"> </div>
     91 <div class="col-gap col-gap3"> </div>
     92 
     93 <div class="row-gap row-gap1"> </div>
     94 <div class="row-gap row-gap2"> </div>
     95 <div class="row-gap row-gap3"> </div>