tor-browser

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

row-grid-lanes-align-self-001-ref.html (3034B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <style>
      6    html,body {
      7      color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
      8    }
      9 
     10    .grid {
     11      display: grid;
     12      gap: 2px;
     13      grid-template-rows: repeat(3, 40px);
     14      grid-template-columns: repeat(4, min-content);
     15      color: #444;
     16      border: 1px solid;
     17      padding: 2px;
     18      width: 250px;
     19      margin: 5px;
     20    }
     21 
     22    item {
     23      background-color: #444;
     24      color: #fff;
     25      padding: 2px;
     26      width: 45px;
     27    }
     28 
     29    .start {
     30      align-self: start;
     31      background-color: red;
     32    }
     33 
     34    .end {
     35      align-self: end;
     36      background-color: blue;
     37    }
     38 
     39    .center {
     40      align-self: center;
     41      background-color: green;
     42    }
     43 
     44    .stretch {
     45      align-self: stretch;
     46      background-color: orange;
     47    }
     48 
     49    .auto {
     50      align-self: auto;
     51      background-color: gray;
     52    }
     53 
     54    .short {
     55      height: 15px;
     56    }
     57 
     58    .medium {
     59      height: 20px;
     60    }
     61 
     62    .tall {
     63      height: 30px;
     64    }
     65  </style>
     66 </head>
     67 <body>
     68 <div class="grid">
     69  <item class="start short">S1</item>
     70  <item class="center short">C1</item>
     71  <item class="end short">E1</item>
     72  <item class="stretch">ST1</item>
     73  <item class="start medium">S2</item>
     74  <item class="center medium">C2</item>
     75  <item class="end medium">E2</item>
     76  <item class="stretch">ST2</item>
     77  <item class="start tall">S3</item>
     78  <item class="center tall">C3</item>
     79  <item class="end tall">E3</item>
     80  <item class="stretch">ST3</item>
     81 </div>
     82 
     83 <div class="grid" style="align-items: start;">
     84  <item class="auto short">A1</item>
     85  <item class="center short">C1</item>
     86  <item class="end short">E1</item>
     87  <item class="stretch">ST1</item>
     88  <item class="auto medium">A2</item>
     89  <item class="center medium">C2</item>
     90  <item class="end medium">E2</item>
     91  <item class="stretch">ST2</item>
     92  <item class="auto tall">A3</item>
     93  <item class="center tall">C3</item>
     94  <item class="end tall">E3</item>
     95  <item class="stretch">ST3</item>
     96 </div>
     97 
     98 <div class="grid" style="align-items: center;">
     99  <item class="auto short">A1</item>
    100  <item class="start short">S1</item>
    101  <item class="end short">E1</item>
    102  <item class="stretch">ST1</item>
    103  <item class="auto medium">A2</item>
    104  <item class="start medium">S2</item>
    105  <item class="end medium">E2</item>
    106  <item class="stretch">ST2</item>
    107  <item class="auto tall">A3</item>
    108  <item class="start tall">S3</item>
    109  <item class="end tall">E3</item>
    110  <item class="stretch">ST3</item>
    111 </div>
    112 
    113 <div class="grid" style="align-items: end;">
    114  <item class="auto short">A1</item>
    115  <item class="start short">S1</item>
    116  <item class="center short">C1</item>
    117  <item class="stretch">ST1</item>
    118  <item class="auto medium">A2</item>
    119  <item class="start medium">S2</item>
    120  <item class="center medium">C2</item>
    121  <item class="stretch">ST2</item>
    122  <item class="auto tall">A3</item>
    123  <item class="start tall">S3</item>
    124  <item class="center tall">C3</item>
    125  <item class="stretch">ST3</item>
    126 </div>
    127 </body>
    128 </html>