tor-browser

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

column-grid-lanes-container-baseline-007b-ref.html (2191B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <style>
      6    .container {
      7      display: flex;
      8      gap: 20px;
      9      border: 2px solid blue;
     10      width: 400px;
     11      padding: 10px;
     12      font-size: 16px;
     13      text-decoration: underline;
     14    }
     15 
     16    .first-baseline {
     17      align-items: baseline;
     18    }
     19 
     20    .last-baseline {
     21      align-items: last baseline;
     22    }
     23 
     24    .grid-explicit {
     25      display: grid;
     26      grid-template-columns: repeat(4, 80px);
     27      border: 1px solid purple;
     28      width: 320px;
     29    }
     30 
     31    .grid-explicit .explicit-item1 {
     32      grid-column: 1 / 3;
     33      background: lightsteelblue;
     34      font-size: 12px;
     35      height: 30px;
     36    }
     37 
     38    .grid-explicit .explicit-item2 {
     39      grid-column: 3 / 5;
     40      width: auto;
     41      background: lightgoldenrodyellow;
     42      font-size: 18px;
     43      height: 30px;
     44    }
     45 
     46    .grid-explicit .explicit-item3 {
     47      grid-column: 1;
     48      background: lightseagreen;
     49      font-size: 12px;
     50      height: 20px;
     51    }
     52 
     53    .grid-explicit .explicit-item4 {
     54      grid-column: 2 / 4;
     55      background: lightsalmon;
     56      font-size: 20px;
     57      height: 35px;
     58    }
     59 
     60    .grid-explicit .explicit-item5 {
     61      grid-column: 4;
     62      background: lightblue;
     63      font-size: 14px;
     64      height: 22px;
     65    }
     66 
     67    .grid-explicit .explicit-item6 {
     68      grid-column: 1 / 5;
     69      background: lightcyan;
     70      font-size: 22px;
     71      height: 40px;
     72    }
     73  </style>
     74 </head>
     75 <body>
     76 <div class="container first-baseline">
     77  <div>Ref</div>
     78  <div class="grid-explicit">
     79    <div class="explicit-item1">Item 1</div>
     80    <div class="explicit-item2">Item 2</div>
     81    <div class="explicit-item3">Item 3</div>
     82    <div class="explicit-item4">Item 4</div>
     83    <div class="explicit-item5">Item 5</div>
     84    <div class="explicit-item6">Item 6</div>
     85  </div>
     86 </div>
     87 <div class="container last-baseline">
     88  <div>Ref</div>
     89  <div class="grid-explicit">
     90    <div class="explicit-item1">Item 1</div>
     91    <div class="explicit-item2">Item 2</div>
     92    <div class="explicit-item3">Item 3</div>
     93    <div class="explicit-item4">Item 4</div>
     94    <div class="explicit-item5">Item 5</div>
     95    <div class="explicit-item6">Item 6</div>
     96  </div>
     97 </div>
     98 </body>
     99 </html>