tor-browser

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

column-grid-lanes-alignment-positioned-items-003-ref.html (2198B)

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