tor-browser

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

grid-lanes-intrinsic-sizing-rows-004-fr-ref.html (2678B)


      1 <!DOCTYPE HTML>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html>
      7  <meta charset="utf-8">
      8  <title>Reference: Grid Lanes layout max-content sizing</title>
      9  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
     10  <style>
     11 
     12 @import "support/grid-lanes-intrinsic-sizing-visual.css";
     13 
     14 grid {
     15  display: inline-grid;
     16  gap: 1px 2px;
     17  grid-template-rows: 1fr 2fr 1fr 1fr;
     18  grid-auto-flow: column;
     19  border: 1px solid;
     20  padding: 1px 0 2px 0;
     21  vertical-align: top;
     22  height: max-content;
     23 }
     24 
     25 item {
     26  justify-self: start;
     27  writing-mode: vertical-rl;
     28  text-orientation: sideways;
     29 }
     30 
     31 .hidden {
     32  visibility: hidden;
     33  opacity: 0.5;
     34  width: 1em;
     35 }
     36 </style>
     37 
     38 <body>
     39 
     40 <section class="fr">
     41 <grid>
     42  <item style="height:2ch">1</item>
     43  <item>2 2</item>
     44  <item>3 3</item>
     45  <item>4</item>
     46  <item>5 5</item>
     47 
     48  <item class="hidden" style="grid-area: 4/2">0 0</item>
     49 </grid>
     50 
     51 <grid>
     52  <item>1</item>
     53  <item>2 2</item>
     54  <item>3 3</item>
     55  <item>4</item>
     56  <item style="height: 2ch;">5 5</item>
     57 
     58  <item class="hidden" style="grid-area: 4/2">0 0</item>
     59 </grid>
     60 
     61 <grid>
     62  <item>1</item>
     63  <item>2 2</item>
     64  <item>3 3</item>
     65  <item>4</item>
     66  <item style="height:2ch; grid-row:2">5 5</item>
     67 </grid>
     68 
     69 <grid>
     70  <item>1</item>
     71  <item>2 2</item>
     72  <item>3 3</item>
     73  <item>4</item>
     74  <item style="height:4ch; grid-row:2/span 2">5 5</item>
     75 </grid>
     76 
     77 <grid>
     78  <item>1</item>
     79  <item>2 2</item>
     80  <item>3 3</item>
     81  <item>4</item>
     82  <item style="grid-row:2/span 2">5 5</item>
     83  <item style="height:5ch; grid-row:span 3/4">6</item>
     84 </grid>
     85 
     86 <grid>
     87  <item>1</item>
     88  <item>2 2</item>
     89  <item>3 3</item>
     90  <item>4</item>
     91  <item style="height:3ch; grid-row:span 2/4">5</item>
     92  <item style="height:5ch; grid-row:1/span 3">6</item>
     93 </grid>
     94 
     95 <grid>
     96  <item>1</item>
     97  <item>2 2</item>
     98  <item>3 3</item>
     99  <item>4</item>
    100  <item style="grid-area: 1/2/5/3">5 5</item>
    101 
    102  <item class="hidden" style="grid-area: 1/2">0 0</item>
    103  <item class="hidden" style="grid-area: 3/2">0 0</item>
    104 </grid>
    105 
    106 <grid>
    107  <item>1</item>
    108  <item>2 2</item>
    109  <item>3 3</item>
    110  <item>4</item>
    111  <item style="height:6ch; grid-area: 1/2/5/3">5 5</item>
    112 
    113  <item class="hidden" style="grid-area: 1/2">0 0</item>
    114  <item class="hidden" style="grid-area: 4/2">0 0</item>
    115 </grid>
    116 
    117 <grid>
    118  <item>1</item>
    119  <item>2 2</item>
    120  <item>3 3</item>
    121  <item>4</item>
    122  <item style="height:6ch; grid-area: 1/2/4/3">5 5</item>
    123 
    124  <item class="hidden" style="grid-area: 1/2">0 0</item>
    125  <item class="hidden" style="grid-area: 4/2">0 0</item>
    126  <item class="hidden" style="height:6ch; grid-area: 2/2/5/3">0 0</item>
    127 </grid>
    128 </section>
    129 </body>