tor-browser

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

parent-repeat-auto-fit-002-ref.html (18036B)


      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 inside a parent with repeat(auto-fit) rows</title>
      9  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
     10  <style>
     11 html,body {
     12  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
     13 }
     14 
     15 .grid {
     16  display: inline-grid;
     17  height: 50px;
     18  width: 50px;
     19  grid-template-columns: repeat(auto-fit, 10px);
     20  border: 1px solid;
     21  vertical-align: top;
     22 }
     23 
     24 .subgrid {
     25  display: grid;
     26  grid: subgrid / subgrid;
     27  grid-column: 1 / -1;
     28  grid-row: 3 / span 4;
     29  grid-auto-columns: 8px;
     30  background: grey;
     31 }
     32 
     33 .fit-0a  { grid-template-rows: [y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z]; }
     34 .fit-0b  { grid-template-rows: [x y] 0px [z] 1px [z] 1px [z] 1px [z]; }
     35 .fit-0c  { grid-template-rows: [x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
     36 .fit-0d  { grid-template-rows: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]; }
     37 .fit-0e  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]; }
     38 .fit-0f  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px; }
     39 .fit-0g  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]; }
     40 .fit-0h  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]; }
     41 .fit-0i  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]; }
     42 .fit-0j  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px; }
     43 .fit-0k  { grid-template-rows: [y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; }
     44 .fit-0l  { grid-template-rows: [x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; }
     45 .fit-0m  { grid-template-rows: [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px; }
     46 
     47 .fit-1a  { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]; }
     48 .fit-1b  { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
     49 .fit-1c  { grid-template-rows: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]; }
     50 .fit-1d  { grid-template-rows: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]; }
     51 .fit-1e  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px; }
     52 
     53 .fit-2a  { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
     54 .fit-2b  { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; }
     55 .fit-2c  { grid-template-rows: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z]; }
     56 .fit-2d  { grid-template-rows: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px; }
     57 
     58 .fit-3a  { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; }
     59 .fit-3b  { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; }
     60 .fit-3c  { grid-template-rows: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px; }
     61 
     62 .fit-4a  { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; }
     63 .fit-4b  { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; }
     64 
     65 .fit-5   { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; }
     66 
     67 .subgrid > :nth-child(2n)   {  background: black; }
     68 .subgrid > :nth-child(2n+1) {  background: pink; }
     69 
     70  </style>
     71 </head>
     72 <body>
     73 
     74 <div class="grid fit-0a"><div class="subgrid">
     75  <div style="grid-row:y 5"></div>
     76  <div style="grid-row:y 4"></div>
     77  <div style="grid-row:y 3"></div>
     78  <div style="grid-row:y 2"></div>
     79  <div style="grid-row:y 1"></div>
     80  <div style="grid-row:y -1"></div>
     81  <div style="grid-row:y -2"></div>
     82  <div style="grid-row:y -3"></div>
     83  <div style="grid-row:y -4"></div>
     84  <div style="grid-row:y -5"></div>
     85 </div></div>
     86 
     87 <div class="grid fit-0b"><div class="subgrid" style="grid-column-start:2">
     88  <div style="grid-row:y 5"></div>
     89  <div style="grid-row:y 4"></div>
     90  <div style="grid-row:y 3"></div>
     91  <div style="grid-row:y 2"></div>
     92  <div style="grid-row:y 1"></div>
     93  <div style="grid-row:y -1"></div>
     94  <div style="grid-row:y -2"></div>
     95  <div style="grid-row:y -3"></div>
     96  <div style="grid-row:y -4"></div>
     97  <div style="grid-row:y -5"></div>
     98 </div></div>
     99 
    100 <div class="grid fit-0c"><div class="subgrid" style="grid-column-start:3">
    101  <div style="grid-row:y 5"></div>
    102  <div style="grid-row:y 4"></div>
    103  <div style="grid-row:y 3"></div>
    104  <div style="grid-row:y 2"></div>
    105  <div style="grid-row:y 1"></div>
    106  <div style="grid-row:y -1"></div>
    107  <div style="grid-row:y -2"></div>
    108  <div style="grid-row:y -3"></div>
    109  <div style="grid-row:y -4"></div>
    110  <div style="grid-row:y -5"></div>
    111 </div></div>
    112 
    113 <div class="grid fit-0d"><div class="subgrid" style="grid-column-start:4">
    114  <div style="grid-row:y 5"></div>
    115  <div style="grid-row:y 4"></div>
    116  <div style="grid-row:y 3"></div>
    117  <div style="grid-row:y 2"></div>
    118  <div style="grid-row:y 1"></div>
    119  <div style="grid-row:y -1"></div>
    120  <div style="grid-row:y -2"></div>
    121  <div style="grid-row:y -3"></div>
    122  <div style="grid-row:y -4"></div>
    123  <div style="grid-row:y -5"></div>
    124 </div></div>
    125 
    126 <div class="grid fit-0e"><div class="subgrid" style="grid-column-start:5">
    127  <div style="grid-row:y 5"></div>
    128  <div style="grid-row:y 4"></div>
    129  <div style="grid-row:y 3"></div>
    130  <div style="grid-row:y 2"></div>
    131  <div style="grid-row:y 1"></div>
    132  <div style="grid-row:y -1"></div>
    133  <div style="grid-row:y -2"></div>
    134  <div style="grid-row:y -3"></div>
    135  <div style="grid-row:y -4"></div>
    136  <div style="grid-row:y -5"></div>
    137 </div></div>
    138 
    139 <div class="grid fit-0f"><div class="subgrid" style="grid-column-start:6">
    140  <div style="grid-row:y 5"></div>
    141  <div style="grid-row:y 4"></div>
    142  <div style="grid-row:y 3"></div>
    143  <div style="grid-row:y 2"></div>
    144  <div style="grid-row:y 1"></div>
    145  <div style="grid-row:y -1"></div>
    146  <div style="grid-row:y -2"></div>
    147  <div style="grid-row:y -3"></div>
    148  <div style="grid-row:y -4"></div>
    149  <div style="grid-row:y -5"></div>
    150 </div></div>
    151 
    152 <div class="grid fit-0g"><div class="subgrid" style="grid-column-end:-2">
    153  <div style="grid-row:y 5"></div>
    154  <div style="grid-row:y 4"></div>
    155  <div style="grid-row:y 3"></div>
    156  <div style="grid-row:y 2"></div>
    157  <div style="grid-row:y 1"></div>
    158  <div style="grid-row:y -1"></div>
    159  <div style="grid-row:y -2"></div>
    160  <div style="grid-row:y -3"></div>
    161  <div style="grid-row:y -4"></div>
    162  <div style="grid-row:y -5"></div>
    163 </div></div>
    164 
    165 <div class="grid fit-0h"><div class="subgrid" style="grid-column-end:-3">
    166  <div style="grid-row:y 5"></div>
    167  <div style="grid-row:y 4"></div>
    168  <div style="grid-row:y 3"></div>
    169  <div style="grid-row:y 2"></div>
    170  <div style="grid-row:y 1"></div>
    171  <div style="grid-row:y -1"></div>
    172  <div style="grid-row:y -2"></div>
    173  <div style="grid-row:y -3"></div>
    174  <div style="grid-row:y -4"></div>
    175  <div style="grid-row:y -5"></div>
    176 </div></div>
    177 
    178 <div class="grid fit-0i"><div class="subgrid" style="grid-column-end:-4">
    179  <div style="grid-row:y 5"></div>
    180  <div style="grid-row:y 4"></div>
    181  <div style="grid-row:y 3"></div>
    182  <div style="grid-row:y 2"></div>
    183  <div style="grid-row:y 1"></div>
    184  <div style="grid-row:y -1"></div>
    185  <div style="grid-row:y -2"></div>
    186  <div style="grid-row:y -3"></div>
    187  <div style="grid-row:y -4"></div>
    188  <div style="grid-row:y -5"></div>
    189 </div></div>
    190 
    191 <div class="grid fit-0j"><div class="subgrid" style="grid-column-end:-5">
    192  <div style="grid-row:y 5"></div>
    193  <div style="grid-row:y 4"></div>
    194  <div style="grid-row:y 3"></div>
    195  <div style="grid-row:y 2"></div>
    196  <div style="grid-row:y 1"></div>
    197  <div style="grid-row:y -1"></div>
    198  <div style="grid-row:y -2"></div>
    199  <div style="grid-row:y -3"></div>
    200  <div style="grid-row:y -4"></div>
    201  <div style="grid-row:y -5"></div>
    202 </div></div>
    203 
    204 <div class="grid fit-0k"><div class="subgrid" style="grid-column-end:-6">
    205  <div style="grid-row:y 5"></div>
    206  <div style="grid-row:y 4"></div>
    207  <div style="grid-row:y 3"></div>
    208  <div style="grid-row:y 2"></div>
    209  <div style="grid-row:y 1"></div>
    210  <div style="grid-row:y -1"></div>
    211  <div style="grid-row:y -2"></div>
    212  <div style="grid-row:y -3"></div>
    213  <div style="grid-row:y -4"></div>
    214  <div style="grid-row:y -5"></div>
    215 </div></div>
    216 
    217 <div class="grid fit-0l"><div class="subgrid" style="grid-column:2/-2">
    218  <div style="grid-row:y 5"></div>
    219  <div style="grid-row:y 4"></div>
    220  <div style="grid-row:y 3"></div>
    221  <div style="grid-row:y 2"></div>
    222  <div style="grid-row:y 1"></div>
    223  <div style="grid-row:y -1"></div>
    224  <div style="grid-row:y -2"></div>
    225  <div style="grid-row:y -3"></div>
    226  <div style="grid-row:y -4"></div>
    227  <div style="grid-row:y -5"></div>
    228 </div></div>
    229 
    230 <div class="grid fit-0m"><div class="subgrid" style="grid-column:3/-3">
    231  <div style="grid-row:y 5"></div>
    232  <div style="grid-row:y 4"></div>
    233  <div style="grid-row:y 3"></div>
    234  <div style="grid-row:y 2"></div>
    235  <div style="grid-row:y 1"></div>
    236  <div style="grid-row:y -1"></div>
    237  <div style="grid-row:y -2"></div>
    238  <div style="grid-row:y -3"></div>
    239  <div style="grid-row:y -4"></div>
    240  <div style="grid-row:y -5"></div>
    241 </div></div>
    242 
    243 <div class="grid fit-1a"><div class="subgrid" style="grid-column:2/-3">
    244  <div style="grid-row:y 5"></div>
    245  <div style="grid-row:y 4"></div>
    246  <div style="grid-row:y 3"></div>
    247  <div style="grid-row:y 2"></div>
    248  <div style="grid-row:y 1"></div>
    249  <div style="grid-row:y -1"></div>
    250  <div style="grid-row:y -2"></div>
    251  <div style="grid-row:y -3"></div>
    252  <div style="grid-row:y -4"></div>
    253  <div style="grid-row:y -5"></div>
    254 </div></div>
    255 
    256 <div class="grid fit-1b"><div class="subgrid" style="grid-column:3/-2">
    257  <div style="grid-row:y 5"></div>
    258  <div style="grid-row:y 4"></div>
    259  <div style="grid-row:y 3"></div>
    260  <div style="grid-row:y 2"></div>
    261  <div style="grid-row:y 1"></div>
    262  <div style="grid-row:y -1"></div>
    263  <div style="grid-row:y -2"></div>
    264  <div style="grid-row:y -3"></div>
    265  <div style="grid-row:y -4"></div>
    266  <div style="grid-row:y -5"></div>
    267 </div></div>
    268 
    269 <div class="grid fit-1c"><div class="subgrid">
    270  <div style="grid-row:y 5"></div>
    271  <div style="grid-row:y 4"></div>
    272  <div style="grid-row:y 3"></div>
    273  <div style="grid-row:y 2"></div>
    274  <div style="grid-row:y 1"></div>
    275  <div style="grid-row:y -1"></div>
    276  <div style="grid-row:y -2"></div>
    277  <div style="grid-row:y -3"></div>
    278  <div style="grid-row:y -4"></div>
    279  <div style="grid-row:y -5"></div>
    280 </div></div>
    281 
    282 <div class="grid fit-1d"><div class="subgrid">
    283  <div style="grid-row:y 5"></div>
    284  <div style="grid-row:y 4"></div>
    285  <div style="grid-row:y 3"></div>
    286  <div style="grid-row:y 2"></div>
    287  <div style="grid-row:y 1"></div>
    288  <div style="grid-row:y -1"></div>
    289  <div style="grid-row:y -2"></div>
    290  <div style="grid-row:y -3"></div>
    291  <div style="grid-row:y -4"></div>
    292  <div style="grid-row:y -5"></div>
    293 </div></div>
    294 
    295 <div class="grid fit-1e"><div class="subgrid">
    296  <div style="grid-row:y 5"></div>
    297  <div style="grid-row:y 4"></div>
    298  <div style="grid-row:y 3"></div>
    299  <div style="grid-row:y 2"></div>
    300  <div style="grid-row:y 1"></div>
    301  <div style="grid-row:y -1"></div>
    302  <div style="grid-row:y -2"></div>
    303  <div style="grid-row:y -3"></div>
    304  <div style="grid-row:y -4"></div>
    305  <div style="grid-row:y -5"></div>
    306 </div></div>
    307 
    308 <div class="grid fit-2a"><div class="subgrid">
    309  <div style="grid-row:y 5"></div>
    310  <div style="grid-row:y 4"></div>
    311  <div style="grid-row:y 3"></div>
    312  <div style="grid-row:y 2"></div>
    313  <div style="grid-row:y 1"></div>
    314  <div style="grid-row:y -1"></div>
    315  <div style="grid-row:y -2"></div>
    316  <div style="grid-row:y -3"></div>
    317  <div style="grid-row:y -4"></div>
    318  <div style="grid-row:y -5"></div>
    319 </div></div>
    320 
    321 <div class="grid fit-2b"><div class="subgrid">
    322  <div style="grid-row:y 5"></div>
    323  <div style="grid-row:y 4"></div>
    324  <div style="grid-row:y 3"></div>
    325  <div style="grid-row:y 2"></div>
    326  <div style="grid-row:y 1"></div>
    327  <div style="grid-row:y -1"></div>
    328  <div style="grid-row:y -2"></div>
    329  <div style="grid-row:y -3"></div>
    330  <div style="grid-row:y -4"></div>
    331  <div style="grid-row:y -5"></div>
    332 </div></div>
    333 
    334 <div class="grid fit-2c"><div class="subgrid">
    335  <div style="grid-row:y 5"></div>
    336  <div style="grid-row:y 4"></div>
    337  <div style="grid-row:y 3"></div>
    338  <div style="grid-row:y 2"></div>
    339  <div style="grid-row:y 1"></div>
    340  <div style="grid-row:y -1"></div>
    341  <div style="grid-row:y -2"></div>
    342  <div style="grid-row:y -3"></div>
    343  <div style="grid-row:y -4"></div>
    344  <div style="grid-row:y -5"></div>
    345 </div></div>
    346 
    347 <div class="grid fit-2d"><div class="subgrid">
    348  <div style="grid-row:y 5"></div>
    349  <div style="grid-row:y 4"></div>
    350  <div style="grid-row:y 3"></div>
    351  <div style="grid-row:y 2"></div>
    352  <div style="grid-row:y 1"></div>
    353  <div style="grid-row:y -1"></div>
    354  <div style="grid-row:y -2"></div>
    355  <div style="grid-row:y -3"></div>
    356  <div style="grid-row:y -4"></div>
    357  <div style="grid-row:y -5"></div>
    358 </div></div>
    359 
    360 <div class="grid fit-3a"><div class="subgrid">
    361  <div style="grid-row:y 5"></div>
    362  <div style="grid-row:y 4"></div>
    363  <div style="grid-row:y 3"></div>
    364  <div style="grid-row:y 2"></div>
    365  <div style="grid-row:y 1"></div>
    366  <div style="grid-row:y -1"></div>
    367  <div style="grid-row:y -2"></div>
    368  <div style="grid-row:y -3"></div>
    369  <div style="grid-row:y -4"></div>
    370  <div style="grid-row:y -5"></div>
    371 </div></div>
    372 
    373 <div class="grid fit-3b"><div class="subgrid">
    374  <div style="grid-row:y 5"></div>
    375  <div style="grid-row:y 4"></div>
    376  <div style="grid-row:y 3"></div>
    377  <div style="grid-row:y 2"></div>
    378  <div style="grid-row:y 1"></div>
    379  <div style="grid-row:y -1"></div>
    380  <div style="grid-row:y -2"></div>
    381  <div style="grid-row:y -3"></div>
    382  <div style="grid-row:y -4"></div>
    383  <div style="grid-row:y -5"></div>
    384 </div></div>
    385 
    386 <div class="grid fit-3c"><div class="subgrid">
    387  <div style="grid-row:y 5"></div>
    388  <div style="grid-row:y 4"></div>
    389  <div style="grid-row:y 3"></div>
    390  <div style="grid-row:y 2"></div>
    391  <div style="grid-row:y 1"></div>
    392  <div style="grid-row:y -1"></div>
    393  <div style="grid-row:y -2"></div>
    394  <div style="grid-row:y -3"></div>
    395  <div style="grid-row:y -4"></div>
    396  <div style="grid-row:y -5"></div>
    397 </div></div>
    398 
    399 <div class="grid fit-4a"><div class="subgrid">
    400  <div style="grid-row:y 5"></div>
    401  <div style="grid-row:y 4"></div>
    402  <div style="grid-row:y 3"></div>
    403  <div style="grid-row:y 2"></div>
    404  <div style="grid-row:y 1"></div>
    405  <div style="grid-row:y -1"></div>
    406  <div style="grid-row:y -2"></div>
    407  <div style="grid-row:y -3"></div>
    408  <div style="grid-row:y -4"></div>
    409  <div style="grid-row:y -5"></div>
    410 </div></div>
    411 
    412 <div class="grid fit-4b"><div class="subgrid">
    413  <div style="grid-row:y 5"></div>
    414  <div style="grid-row:y 4"></div>
    415  <div style="grid-row:y 3"></div>
    416  <div style="grid-row:y 2"></div>
    417  <div style="grid-row:y 1"></div>
    418  <div style="grid-row:y -1"></div>
    419  <div style="grid-row:y -2"></div>
    420  <div style="grid-row:y -3"></div>
    421  <div style="grid-row:y -4"></div>
    422  <div style="grid-row:y -5"></div>
    423 </div></div>
    424 
    425 <div class="grid fit-5"><div class="subgrid">
    426  <div style="grid-row:y 5"></div>
    427  <div style="grid-row:y 4"></div>
    428  <div style="grid-row:y 3"></div>
    429  <div style="grid-row:y 2"></div>
    430  <div style="grid-row:y 1"></div>
    431  <div style="grid-row:y -1"></div>
    432  <div style="grid-row:y -2"></div>
    433  <div style="grid-row:y -3"></div>
    434  <div style="grid-row:y -4"></div>
    435  <div style="grid-row:y -5"></div>
    436 </div></div>
    437 
    438 
    439 </body>
    440 </html>