tor-browser

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

grid-gap-decorations-006-ref.html (2023B)

      1 <!DOCTYPE html>
      2 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break">
      3 <link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
      4 <style>
      5  body {
      6    margin: 0px;
      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  }
     22 
     23  .col-gap {
     24    width: 0;
     25    border-left: solid 5px blue;
     26  }
     27 
     28  .col-gap1 {
     29 
     30    position: absolute;
     31    top: 105px;
     32    left: 102.5px;
     33    height: 220px;
     34  }
     35 
     36  .col-gap2 {
     37    position: absolute;
     38    top: 0px;
     39    left: 212.5px;
     40    height: 215px;
     41  }
     42 
     43  .col-gap3 {
     44    position: absolute;
     45    top: 0px;
     46    left: 322.5px;
     47    height: 430px;
     48  }
     49 
     50  .row-gap {
     51    height: 0px;
     52    border-bottom: solid 5px red;
     53  }
     54 
     55  .row-gap1 {
     56    position: absolute;
     57    top: 102.5px;
     58    left: 0px;
     59    width: 215px;
     60  }
     61 
     62  .row-gap2 {
     63    position: absolute;
     64    top: 212.5px;
     65    left: 105px;
     66    width: 220px;
     67  }
     68 
     69  .row-gap3 {
     70    position: absolute;
     71    top: 322.5px;
     72    left: 0px;
     73    width: 430px;
     74  }
     75 </style>
     76 
     77 <div class="grid-container">
     78  <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div>
     79  <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div>
     80  <div class="grid-item" style="grid-row: 2 / 4;"></div>
     81  <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div>
     82  <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div>
     83  <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div>
     84  <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div>
     85  <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div>
     86 </div>
     87 
     88 <div class="col-gap col-gap1"> </div>
     89 <div class="col-gap col-gap2"> </div>
     90 <div class="col-gap col-gap3"> </div>
     91 
     92 <div class="row-gap row-gap1"> </div>
     93 <div class="row-gap row-gap2"> </div>
     94 <div class="row-gap row-gap3"> </div>