tor-browser

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

column-grid-lanes-container-baseline-003a-ref.html (2134B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <style>
      6    .container {
      7      display: flex;
      8      align-items: last baseline;
      9      gap: 20px;
     10      border: 2px solid darkblue;
     11      padding: 10px;
     12      font: 16px/1 monospace;
     13      width: 600px;
     14      text-decoration: underline;
     15    }
     16 
     17    .multicolumn {
     18      column-count: 2;
     19      column-width: 100px;
     20      column-gap: 10px;
     21      border: 1px solid red;
     22      background: #f0f0f0;
     23      display: inline-block;
     24    }
     25 
     26    .multicolumn-item {
     27      border: 1px solid navy;
     28      font-size: 14px;
     29      display: flex;
     30      align-items: flex-start;
     31      break-inside: avoid;
     32      margin-bottom: 10px;
     33      text-decoration: underline;
     34    }
     35 
     36    .multicolumn-item:last-child {
     37      margin-bottom: 0;
     38    }
     39 
     40    .bottom {
     41      align-items: flex-end;
     42    }
     43 
     44    .text-reference {
     45      background: yellow;
     46      padding: 8px;
     47      text-decoration: underline;
     48    }
     49 
     50    .multicolumn-item:nth-child(1) {
     51      height: 30px;
     52      background: lightcoral;
     53      padding: 4px;
     54    }
     55 
     56    .multicolumn-item:nth-child(2) {
     57      height: 50px;
     58      background: lightblue;
     59      padding: 4px;
     60    }
     61 
     62    .multicolumn-item:nth-child(3) {
     63      height: 80px;
     64      background: lightgreen;
     65      padding: 4px;
     66    }
     67 
     68    .multicolumn-item:nth-child(4) {
     69      height: 90px;
     70      background: lightpink;
     71      padding: 4px;
     72    }
     73  </style>
     74 </head>
     75 <body>
     76 <div class="container">
     77  <div class="text-reference">Reference Text</div>
     78  <div class="multicolumn">
     79    <div class="multicolumn-item">Short</div>
     80    <div class="multicolumn-item">Medium</div>
     81    <div class="multicolumn-item">Tall</div>
     82    <div class="multicolumn-item">Tallest</div>
     83  </div>
     84  <div class="text-reference">Reference Text</div>
     85 </div>
     86 <div class="container">
     87  <div class="text-reference">Reference Text</div>
     88  <div class="multicolumn">
     89    <div class="multicolumn-item">Short</div>
     90    <div class="multicolumn-item">Medium</div>
     91    <div class="multicolumn-item">Tall</div>
     92    <div class="multicolumn-item"></div>
     93  </div>
     94  <div class="text-reference">Reference Text</div>
     95 </div>
     96 </body>
     97 </html>