tor-browser

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

column-grid-lanes-container-baseline-003b-ref.html (2095B)

      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      width: 100px;
     28      border: 1px solid navy;
     29      font-size: 14px;
     30      display: flex;
     31      align-items: flex-start;
     32      break-inside: avoid;
     33      margin-bottom: 10px;
     34      text-decoration: underline;
     35      padding: 4px;
     36    }
     37 
     38    .multicolumn-item:last-child {
     39      margin-bottom: 0;
     40    }
     41 
     42    .bottom {
     43      align-items: flex-end;
     44    }
     45 
     46    .text-reference {
     47      background: yellow;
     48      padding: 8px;
     49      text-decoration: underline;
     50    }
     51 
     52    .multicolumn-item:nth-child(1) {
     53      height: 30px;
     54      background: lightcoral;
     55    }
     56 
     57    .multicolumn-item:nth-child(2) {
     58      height: 50px;
     59      background: lightblue;
     60    }
     61 
     62    .multicolumn-item:nth-child(3) {
     63      height: 80px;
     64      background: lightgreen;
     65    }
     66 
     67    .multicolumn-item:nth-child(4) {
     68      height: 90px;
     69      background: lightpink;
     70    }
     71  </style>
     72 </head>
     73 <body>
     74 <div class="container">
     75  <div class="text-reference">Reference Text</div>
     76  <div class="multicolumn">
     77    <div class="multicolumn-item">Short</div>
     78    <div class="multicolumn-item">Medium</div>
     79    <div class="multicolumn-item bottom">Tall</div>
     80    <div class="multicolumn-item"></div>
     81  </div>
     82  <div class="text-reference">Reference Text</div>
     83 </div>
     84 <div class="container">
     85  <div class="text-reference">Reference Text</div>
     86  <div class="multicolumn">
     87    <div class="multicolumn-item">Short</div>
     88    <div class="multicolumn-item"></div>
     89    <div class="multicolumn-item bottom">Tall</div>
     90    <div class="multicolumn-item"></div>
     91  </div>
     92  <div class="text-reference">Reference Text</div>
     93 </div>
     94 </body>
     95 </html>