tor-browser

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

column-grid-lanes-container-baseline-001a-ref.html (2268B)

      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    .multicolumn {
     25      column-count: 3;
     26      column-width: 100px;
     27      column-gap: 10px;
     28      border: 1px solid red;
     29      background: #f0f0f0;
     30      display: inline-block;
     31    }
     32 
     33    .multicolumn-item {
     34      background: lightblue;
     35      padding: 8px;
     36      border: 1px solid navy;
     37      break-inside: avoid;
     38      margin-bottom: 10px;
     39    }
     40 
     41    .multicolumn-item:last-child {
     42      margin-bottom: 0;
     43    }
     44 
     45    .text-reference {
     46      background: yellow;
     47      padding: 8px;
     48    }
     49 
     50    .bottom {
     51      display: flex;
     52      align-items: end;
     53    }
     54 
     55    .multicolumn-item:nth-child(1) { height: 40px; font-size: 20px}
     56    .multicolumn-item:nth-child(2) { height: 100px; }
     57    .multicolumn-item:nth-child(3) { height: 80px; }
     58    .multicolumn-item:nth-child(4) { height: 70px; }
     59    .multicolumn-item:nth-child(5) { height: 60px; font-size: 22px}
     60    .multicolumn-item:nth-child(6) { height: 50px; }
     61  </style>
     62 </head>
     63 <body>
     64 <div class="container first-baseline">
     65  <div class="text-reference">Reference text</div>
     66  <div class="multicolumn">
     67    <div class="multicolumn-item">Item 1</div>
     68    <div class="multicolumn-item">Item 4</div>
     69    <div class="multicolumn-item">Item 2</div>
     70    <div class="multicolumn-item">Item 6</div>
     71    <div class="multicolumn-item">Item 3</div>
     72    <div class="multicolumn-item">Item 5</div>
     73  </div>
     74  <div class="text-reference">Reference text</div>
     75 </div>
     76 <div class="container last-baseline">
     77  <div class="text-reference">Reference text</div>
     78  <div class="multicolumn">
     79    <div class="multicolumn-item">Item 1</div>
     80    <div class="multicolumn-item">Item 4</div>
     81    <div class="multicolumn-item">Item 2</div>
     82    <div class="multicolumn-item">Item 6</div>
     83    <div class="multicolumn-item">Item 3</div>
     84    <div class="multicolumn-item">Item 5</div>
     85  </div>
     86  <div class="text-reference">Reference text</div>
     87 </div>
     88 </body>
     89 </html>