tor-browser

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

rtl-grid-placement-auto-row-sparse-001.html (2315B)

      1 <!DOCTYPE HTML>
      2 <html><head>
      3    <meta charset="utf-8">
      4    <title></title>
      5    <style type="text/css">
      6 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
      7 
      8 .grid {
      9  display: grid;
     10  border: 2px solid green;
     11  grid-template-columns: 20px 20px 20px 20px;
     12  grid-template-rows: 20px 20px 20px;
     13  grid-auto-flow: row;
     14  grid-auto-columns: 20px;
     15  grid-auto-rows: 20px;
     16 }
     17 
     18 span {
     19  background: lime;
     20  border: 1px solid;
     21 }
     22 
     23 .test1 .a {
     24  grid-row: 1;
     25  grid-column: 2 / span 1;
     26 }
     27 .test1 .b {
     28  grid-row: 2;
     29  grid-column: 2 / span 3;
     30 }
     31 .test1 .c, .test2 .c {
     32  grid-row: 1 / span 2;
     33  grid-column: auto / span 3;
     34 }
     35 
     36 .test2 .a {
     37  grid-row: 1;
     38  grid-column: 2 / span 3;
     39 }
     40 .test2 .b {
     41  grid-row: 2;
     42  grid-column: 2 / span 1;
     43 }
     44 
     45 .test3 {
     46  grid-template-areas:
     47    'a a a . '
     48    'a a a . '
     49    '. b b . '
     50  ;
     51 }
     52 .test3 .a {
     53  grid-area: a;
     54 }
     55 .test3 .b {
     56  grid-column: 2 / span 3;
     57  grid-row: b;
     58 }
     59 .test3 .c {
     60  grid-row: auto / span 2;
     61  grid-column: auto / span 3;
     62 }
     63 
     64 .test4 .c {
     65  grid-row: auto / span 2;
     66  grid-column: auto / span 3;
     67 }
     68 
     69 .test5 .c {
     70  grid-row-start: 2;
     71  grid-column: auto / span 3;
     72 }
     73 
     74 .test6 {
     75  grid-row-start: 2;
     76  grid-column: auto / span X;
     77 }
     78 
     79 .e {
     80  grid-row-start: 2;
     81  grid-column: auto / span 1;
     82 }
     83    </style>
     84 </head>
     85 <body dir=rtl>
     86 
     87 <div class="grid test1">
     88 <span class="a">a</span>
     89 <span class="b">b</span>
     90 <span class="c">c</span>
     91 <span class="d">d</span>
     92 <span class="d">D</span>
     93 <span class="e">e</span>
     94 </div>
     95 
     96 <div class="grid test2">
     97 <span class="a">a</span>
     98 <span class="b">b</span>
     99 <span class="c">c</span>
    100 <span class="d">d</span>
    101 <span class="d">D</span>
    102 <span class="e">e</span>
    103 </div>
    104 
    105 <div class="grid test3">
    106 <span class="a">a</span>
    107 <span class="b">b</span>
    108 <span class="c">c</span>
    109 <span class="d">d</span>
    110 <span class="d">D</span>
    111 <span class="e">e</span>
    112 </div>
    113 
    114 <div class="grid test4">
    115 <span class="c">c</span>
    116 <span class="d">d</span>
    117 <span class="d">D</span>
    118 <span class="e">e</span>
    119 </div>
    120 
    121 <div class="grid test5">
    122 <span class="c">c</span>
    123 <span class="d">d</span>
    124 <span class="d">D</span>
    125 <span class="e">e</span>
    126 </div>
    127 
    128 <div class="grid test1">
    129 <span class="a">a</span>
    130 <span class="b">b</span>
    131 <span class="c">c</span>
    132 <span class="test6">d</span>
    133 <span class="test6">D</span>
    134 <span class="e">e</span>
    135 </div>
    136 
    137 </body>
    138 </html>