tor-browser

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

column-grid-lanes-container-baseline-001b-ref.html (2132B)

      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      padding: 10px;
     11      font: 16px/1 monospace;
     12      width: 800px;
     13      text-decoration: underline;
     14    }
     15 
     16    .first-baseline {
     17      align-items: first baseline;
     18    }
     19 
     20    .last-baseline {
     21      align-items: last baseline;
     22    }
     23 
     24    .text-reference {
     25      background: yellow;
     26      padding: 8px;
     27    }
     28 
     29    .bottom {
     30      display: flex;
     31      align-items: end;
     32    }
     33 
     34    .grid {
     35      display: grid;
     36      grid-template-columns: repeat(3, 100px);
     37      grid-template-rows: auto;
     38      gap: 10px;
     39      border: 1px solid red;
     40      background: #f0f0f0;
     41    }
     42 
     43    .grid-item {
     44      padding: 8px;
     45      border: 1px solid navy;
     46    }
     47 
     48    .grid-item:nth-child(1) {
     49      grid-column: 1 / span 2;
     50      height: 45px;
     51      background: lightcoral;
     52    }
     53 
     54    .grid-item:nth-child(2) {
     55      height: 75px;
     56      background: lightgreen;
     57    }
     58 
     59    .grid-item:nth-child(3) {
     60      grid-column: 1 / span 3;
     61      height: 55px;
     62      background: lightpink;
     63    }
     64 
     65    .grid-item:nth-child(4) {
     66      height: 90px;
     67      background: lightyellow;
     68    }
     69 
     70    .grid-item:nth-child(5) {
     71      grid-column: 2 / span 2;
     72      height: 65px;
     73      background: lightcyan;
     74    }
     75  </style>
     76 </head>
     77 <body>
     78 <div class="container first-baseline">
     79  <div class="text-reference">Reference text</div>
     80  <div class="grid">
     81    <div class="grid-item">Item 1</div>
     82    <div class="grid-item bottom">Item 2</div>
     83    <div class="grid-item">Item 3</div>
     84    <div class="grid-item">Item 4</div>
     85    <div class="grid-item">Item 5</div>
     86  </div>
     87  <div class="text-reference">Reference text</div>
     88 </div>
     89 <div class="container last-baseline">
     90  <div class="text-reference">Reference text</div>
     91  <div class="grid">
     92    <div class="grid-item">Item 1</div>
     93    <div class="grid-item">Item 2</div>
     94    <div class="grid-item">Item 3</div>
     95    <div class="grid-item">Item 4</div>
     96    <div class="grid-item bottom">Item 5</div>
     97  </div>
     98  <div class="text-reference">Reference text</div>
     99 </div>
    100 </body>
    101 </html>