tor-browser

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

row-grid-lanes-alignment-positioned-items-003-ref.html (2203B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <style>
      6    html,body {
      7        color:black; background-color:white; font:8px/1 monospace; padding:0; margin:0;
      8    }
      9 
     10    .grid {
     11        position: relative;
     12        display: grid;
     13        grid-template-columns: 150px;
     14        grid-template-rows: 90px 90px 90px;
     15        width: 150px;
     16        height: 320px;
     17        gap: 10px;
     18        padding: 15px;
     19        border: 2px solid black;
     20        margin: 10px;
     21    }
     22 
     23    .grid > div {
     24        position: absolute;
     25        border: 1px solid #333;
     26        width: 30px;
     27        height: 70px;
     28        display: flex;
     29        align-items: center;
     30        justify-content: center;
     31    }
     32 
     33    .flex-start-item {
     34        grid-row: 1 / 2;
     35        justify-self: flex-start;
     36        align-self: flex-start;
     37        background: lightcoral;
     38    }
     39 
     40    .flex-end-item {
     41        grid-row: 2 / 3;
     42        justify-self: flex-end;
     43        align-self: flex-end;
     44        background: lightblue;
     45    }
     46 
     47    .mixed-legacy {
     48        grid-row: 3 / 4;
     49        justify-self: flex-start;
     50        align-self: end;
     51        background: lightgreen;
     52    }
     53 
     54    .normal-item {
     55        grid-row: 1 / 2;
     56        justify-self: normal;
     57        align-self: normal;
     58        background: lightyellow;
     59    }
     60 
     61    .auto-item {
     62        grid-row: 2 / 3;
     63        justify-self: auto;
     64        align-self: auto;
     65        background: plum;
     66    }
     67 
     68    .legacy-center {
     69        grid-row: 3 / 4;
     70        justify-self: flex-start;
     71        align-self: center;
     72        background: orange;
     73    }
     74  </style>
     75 </head>
     76 <body>
     77  <div class="grid">
     78    <div class="flex-start-item">flex-start</div>
     79    <div class="flex-end-item">flex-end</div>
     80    <div class="mixed-legacy">mixed</div>
     81    <div class="normal-item">normal</div>
     82    <div class="auto-item">auto</div>
     83    <div class="legacy-center">legacy-center</div>
     84  </div>
     85 
     86  <div class="grid" style="direction: rtl;">
     87    <div class="flex-start-item">flex-start</div>
     88    <div class="flex-end-item">flex-end</div>
     89    <div class="mixed-legacy">mixed</div>
     90    <div class="normal-item">normal</div>
     91    <div class="auto-item">auto</div>
     92    <div class="legacy-center">legacy-center</div>
     93  </div>
     94 </body>
     95 </html>