tor-browser

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

balance-grid-container-ref.html (1293B)

      1 <!DOCTYPE html>
      2 <html>
      3  <meta charset="utf-8">
      4  <title>CSS Multi-column Layout Test Reference: Balance a grid container</title>
      5  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
      6  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
      7 
      8  <style>
      9  :root {
     10    font: 16px/1.25 sans-serif;
     11  }
     12  .two-columns {
     13    column-count: 2;
     14    width: 550px;
     15  }
     16  .two-column-grid {
     17    display: grid;
     18    grid-template-columns: 1fr 1fr;
     19    grid-auto-rows: auto;
     20  }
     21  .grid-col-1 {
     22    grid-column: 1;
     23  }
     24  .grid-col-2 {
     25    grid-column: 2;
     26  }
     27  .keep-together {
     28    display: inline-block;
     29  }
     30  </style>
     31 
     32  <div class="two-columns">
     33    <div class="two-column-grid">
     34      <div class="grid-col-1">ID Number</div>
     35      <div class="grid-col-2">01234567890</div>
     36      <div class="grid-col-1">Address</div>
     37      <div class="grid-col-2">
     38        <div class="keep-together">
     39          123 Fake Street<br>
     40          London<br>
     41          NW1 1AA<br>
     42          UK
     43        </div>
     44      </div>
     45    </div>
     46 
     47    <div class="two-column-grid">
     48      <div class="grid-col-1">Relevant Countries</div>
     49      <div class="grid-col-2">
     50        Ireland<br>
     51        United Kingdom
     52      </div>
     53    </div>
     54  </div>
     55 
     56  <div>
     57    Some content underneath the details.
     58  </div>
     59 </html>