tor-browser

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

writing-directions-003-ref.html (2109B)

      1 <!DOCTYPE HTML>
      2 <html><head>
      3  <meta charset="utf-8">
      4  <title>Reference: out-of-flow subgridded items properly map repetitions</title>
      5  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
      6  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
      7  <style>
      8 
      9 .grid {
     10  display: grid;
     11  grid-template: repeat(5, 10px) repeat(5, 10px) / repeat(5, 10px) repeat(5, 10px);
     12  background: grey;
     13  border: 1px solid;
     14  width: 100px;
     15  height: 100px;
     16 }
     17 
     18 .grid-item {
     19  width: 10px;
     20  height: 10px;
     21  background: orange;
     22  border: 1px solid;
     23 }
     24 
     25 .rtl { direction:rtl; }
     26 
     27 .ltr { direction:ltr; }
     28 
     29  </style>
     30 </head>
     31 <body>
     32 
     33 <div class="grid rtl">
     34  <div class="grid-item" style="grid-column: 10; grid-row: 10;"></div>
     35  <div class="grid-item" style="grid-column: 9; grid-row: 9;"></div>
     36  <div class="grid-item" style="grid-column: 8; grid-row: 8;"></div>
     37  <div class="grid-item" style="grid-column: 7; grid-row: 7;"></div>
     38  <div class="grid-item" style="grid-column: 6; grid-row: 6;"></div>
     39  <div class="grid-item" style="grid-column: 5; grid-row: 5;"></div>
     40  <div class="grid-item" style="grid-column: 4; grid-row: 4;"></div>
     41  <div class="grid-item" style="grid-column: 3; grid-row: 3;"></div>
     42  <div class="grid-item" style="grid-column: 2; grid-row: 2;"></div>
     43  <div class="grid-item" style="grid-column: 1; grid-row: 1;"></div>
     44 </div>
     45 
     46 <div class="grid ltr">
     47  <div class="grid-item" style="grid-column: 10; grid-row: 10;"></div>
     48  <div class="grid-item" style="grid-column: 9; grid-row: 9;"></div>
     49  <div class="grid-item" style="grid-column: 8; grid-row: 8;"></div>
     50  <div class="grid-item" style="grid-column: 7; grid-row: 7;"></div>
     51  <div class="grid-item" style="grid-column: 6; grid-row: 6;"></div>
     52  <div class="grid-item" style="grid-column: 5; grid-row: 5;"></div>
     53  <div class="grid-item" style="grid-column: 4; grid-row: 4;"></div>
     54  <div class="grid-item" style="grid-column: 3; grid-row: 3;"></div>
     55  <div class="grid-item" style="grid-column: 2; grid-row: 2;"></div>
     56  <div class="grid-item" style="grid-column: 1; grid-row: 1;"></div>
     57 </div>
     58 
     59 </body>
     60 </html>