tor-browser

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

column-grid-lanes-container-baseline-002b.html (2219B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <title>CSS Grid Lanes Test: align-items:baseline</title>
      6  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
      7  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-baseline-alignment">
      8  <link rel="match" href="column-grid-lanes-container-baseline-002b-ref.html">
      9  <style>
     10    .container {
     11      display: flex;
     12      align-items: baseline;
     13      gap: 20px;
     14      border: 2px solid darkblue;
     15      padding: 10px;
     16      font: 16px/1 monospace;
     17      width: 600px;
     18      text-decoration: underline;
     19    }
     20 
     21    .grid-lanes {
     22      display: grid-lanes;
     23      grid-template-columns: repeat(2, 100px);
     24      gap: 10px;
     25      border: 1px solid red;
     26      background: #f0f0f0;
     27    }
     28 
     29    .grid-lanes-item {
     30      border: 1px solid navy;
     31      font-size: 14px;
     32      display: flex;
     33      align-items: flex-end;
     34    }
     35 
     36    .top {
     37      align-items: flex-start;
     38    }
     39 
     40    .text-reference {
     41      background: yellow;
     42      padding: 8px;
     43    }
     44 
     45    .grid-lanes-item:nth-child(1) {
     46      height: 30px;
     47      background: lightcoral;
     48      padding: 4px;
     49    }
     50 
     51    .grid-lanes-item:nth-child(2) {
     52      height: 80px;
     53      background: lightgreen;
     54      padding: 4px;
     55    }
     56 
     57    .grid-lanes-item:nth-child(3) {
     58      height: 50px;
     59      background: lightblue;
     60      padding: 4px;
     61    }
     62 
     63    .grid-lanes-item:nth-child(4) {
     64      height: 90px;
     65      background: lightpink;
     66      padding: 4px;
     67    }
     68  </style>
     69 </head>
     70 <body>
     71 <div class="container">
     72  <div class="text-reference">Reference Text</div>
     73  <div class="grid-lanes">
     74    <div class="grid-lanes-item"></div>
     75    <div class="grid-lanes-item">Tall</div>
     76    <div class="grid-lanes-item top">Medium</div>
     77    <div class="grid-lanes-item">Tallest</div>
     78  </div>
     79  <div class="text-reference">Reference Text</div>
     80 </div>
     81 <div class="container">
     82  <div class="text-reference">Reference Text</div>
     83  <div class="grid-lanes">
     84    <div class="grid-lanes-item"></div>
     85    <div class="grid-lanes-item"></div>
     86    <div class="grid-lanes-item">Medium</div>
     87    <div class="grid-lanes-item">Tallest</div>
     88  </div>
     89  <div class="text-reference">Reference Text</div>
     90 </div>
     91 </body>
     92 </html>