tor-browser

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

grid-gap-decorations-008-ref.html (2433B)

      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 
     14        width: 430px;
     15        height: 430px;
     16    }
     17 
     18    .grid-container>div {
     19        z-index: 2
     20    }
     21 
     22    .grid-item {
     23        background-color: gray;
     24        opacity: 0.5;
     25        border: 1px solid #000;
     26    }
     27 
     28    .row-gap1 {
     29        position: absolute;
     30        height: 0px;
     31        top: 102.5px;
     32        left: 0px;
     33        width: 430px;
     34        border-bottom: solid 5px red;
     35    }
     36 
     37    .row-gap2 {
     38        position: absolute;
     39        height: 0px;
     40 
     41        top: 212.5px;
     42        left: 0px;
     43        width: 430px;
     44        border-bottom: solid 5px red;
     45    }
     46 
     47    .row-gap3 {
     48        position: absolute;
     49        height: 0px;
     50        display: flex;
     51        top: 322.5px;
     52        left: 0px;
     53        border-bottom: solid 5px red;
     54        width: 430px;
     55    }
     56 
     57    .col-gap1 {
     58        position: absolute;
     59        width: 0;
     60        height: 430px;
     61        border-left: solid 5px blue;
     62        top: 0px;
     63        left: 102.5px;
     64    }
     65 
     66    .col-gap2 {
     67        position: absolute;
     68        width: 0;
     69        height: 430px;
     70        top: 0px;
     71        left: 212.5px;
     72        border-left: solid 5px blue;
     73    }
     74 
     75    .col-gap3 {
     76        position: absolute;
     77        width: 0;
     78        height: 430px;
     79        top: 0px;
     80        left: 322.5px;
     81        border-left: solid 5px blue;
     82 
     83    }
     84 </style>
     85 <div class="grid-container">
     86    <div class="grid-item" style="grid-column: 1 / 3; grid-row: 1 / 2;"></div>
     87    <div class="grid-item" style="grid-column: 3 / 4; grid-row: 1 / 3;"></div>
     88    <div class="grid-item" style="grid-row: 2 / 4;"></div>
     89    <div class="grid-item" style="grid-column: 2 / 4; grid-row: 3 / 4;"></div>
     90    <div class="grid-item" style="grid-column: 2 / 3; grid-row: 2 / 3;"></div>
     91    <div class="grid-item" style="grid-column: 4 / 5; grid-row: 1 / 4;"></div>
     92    <div class="grid-item" style="grid-column: 1 / 4; grid-row: 4 / 5;"></div>
     93    <div class="grid-item" style="grid-column: 4 / 5; grid-row: 4 / 5;"></div>
     94 </div>
     95 
     96 <div class="col-gap1"></div>
     97 <div class="col-gap2"></div>
     98 <div class="col-gap3"></div>
     99 
    100 <div class="row-gap1"></div>
    101 <div class="row-gap2"></div>
    102 <div class="row-gap3"></div>