tor-browser

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

auto-track-sizing-001-ref.html (1551B)


      1 <!DOCTYPE HTML>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html><head>
      7  <meta charset="utf-8">
      8  <title>Reference: subgrid auto track sizing</title>
      9  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1558705">
     10  <style>
     11 html,body {
     12  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
     13 }
     14 
     15 .grid {
     16  display: grid;
     17  max-width: 260px;
     18  padding: 1px 5px;
     19  border: 1px solid;
     20 }
     21 .subgrid {
     22  display: grid;
     23  padding: 3px 5px 7px 11px;
     24  border-style: solid;
     25  border-width: 5px 7px 11px 3px;
     26  margin: 7px 11px 3px 5px;
     27  background: grey;
     28 }
     29 
     30  </style>
     31 </head>
     32 <body>
     33 
     34 <article class="grid">
     35  <div class="subgrid">
     36    The cat can not be separated from milk
     37  </div>
     38 </article>
     39 
     40 <article class="grid" style="grid-template-columns: 100px auto">
     41  <div class="subgrid">
     42    The cat can not be separated from milk
     43  </div>
     44 </article>
     45 
     46 <article class="grid" style="grid-template-columns: auto 100px">
     47  <div class="subgrid" style="grid-column:2">
     48    The cat can not be separated from milk
     49  </div>
     50 </article>
     51 
     52 <article class="grid" style="grid-template-columns: auto 100px auto">
     53  <div class="subgrid" style="grid-column:2 / span 2">
     54    The cat can not be separated from milk
     55  </div>
     56 </article>
     57 
     58 <article class="grid" style="grid-template-columns: auto 100px auto">
     59  <div class="subgrid" style="grid-column:1 / span 3">
     60    The cat can not be separated from milk
     61  </div>
     62 </article>
     63 
     64 </body>
     65 </html>