tor-browser

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

column-grid-lanes-justify-self-003.html (2294B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <title>CSS Grid Lanes Test: Grid Lanes layout with `justify-self`</title>
      6  <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
      7  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#alignment">
      8  <link rel="match" href="column-grid-lanes-justify-self-003-ref.html">
      9  <style>
     10    html,body {
     11      color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
     12    }
     13 
     14    .grid-lanes {
     15      display: grid-lanes;
     16      width: 250px;
     17      height: 100px;
     18      grid-template-columns: repeat(4, 1fr);
     19      gap: 5px;
     20      border: 1px solid black;
     21      margin-bottom: 20px;
     22    }
     23 
     24    .item {
     25      background-color: #444;
     26      color: #fff;
     27      padding: 2px;
     28      height: 35px;
     29    }
     30 
     31    .img-placeholder {
     32      width: 30px;
     33      height: 30px;
     34      background: linear-gradient(45deg, #666, #999);
     35      display: inline-block;
     36    }
     37 
     38    input[type="text"] {
     39      background-color: #f0f0f0;
     40      border: 1px solid #999;
     41      padding: 2px;
     42      width: 40px;
     43      height: auto;
     44    }
     45 
     46    button {
     47      background-color: #ddd;
     48      border: 1px solid #999;
     49      padding: 2px 4px;
     50      cursor: pointer;
     51      height: auto;
     52    }
     53 
     54    .start {
     55      justify-self: start;
     56      background-color: red;
     57    }
     58 
     59    .end {
     60      justify-self: end;
     61      background-color: blue;
     62    }
     63 
     64    .center {
     65      justify-self: center;
     66      background-color: green;
     67    }
     68 
     69    .stretch {
     70      justify-self: stretch;
     71      background-color: orange;
     72    }
     73  </style>
     74 </head>
     75 <body>
     76 <div class="grid-lanes">
     77  <div class="item start">
     78    <div class="img-placeholder"></div>
     79  </div>
     80  <div class="item center">
     81    <div class="img-placeholder"></div>
     82  </div>
     83  <div class="item end">
     84    <div class="img-placeholder"></div>
     85  </div>
     86  <div class="item stretch">
     87    <div class="img-placeholder" style="width: 100%;"></div>
     88  </div>
     89 </div>
     90 
     91 <div class="grid-lanes">
     92  <div class="item start">
     93    <input type="text" value="start">
     94  </div>
     95  <div class="item center">
     96    <button>center</button>
     97  </div>
     98  <div class="item end">
     99    <input type="text" value="end">
    100  </div>
    101  <div class="item stretch">
    102    <button style="width: 100%;">stretch</button>
    103  </div>
    104 </div>
    105 </body>
    106 </html>