tor-browser

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

grid-intrinsic-maximums.html (4436B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>CSS Grid: Grid item intrinsic maximum sizes</title>
      4 <link rel="author" title="Serio Villar" href="mailto:svillar@igalia.com">
      5 <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
      6 <link href="/css/support/grid.css" rel="stylesheet">
      7 <link href="/css/support/width-keyword-classes.css" rel="stylesheet">
      8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
      9 <link rel="match" href="grid-intrinsic-maximums-ref.html">
     10 
     11 <style>
     12 
     13 .item {
     14    font: 10px/1 Ahem;
     15    background: cyan;
     16    grid-column: 1 / -1;
     17 }
     18 
     19 .abs {
     20    width: 100%;
     21    height: 5px;
     22    position: absolute;
     23 }
     24 
     25 .grid {
     26    border: 2px solid black;
     27    display: grid;
     28    position: relative;
     29    padding-top: 10px;
     30    margin-bottom: 10px;
     31    width: 100px;
     32    justify-items: start;
     33 }
     34 
     35 .float {
     36    float: left;
     37    width: 200px;
     38 }
     39 
     40 .col1 { grid-column: 1 / 2; background: orange; }
     41 .col2 { grid-column: 2 / 3; background: indigo; }
     42 .col3 { grid-column: 3 / 4; background: green; }
     43 
     44 .gridMinContent { grid-template: 20px / minmax(0px, min-content) 5px; }
     45 .gridMaxContent { grid-template: 20px / 5px minmax(0px, max-content); }
     46 .gridMinMaxContent { grid-template: 20px / minmax(0px, min-content) 5% minmax(0px, max-content); }
     47 .gridAutoMinContent { grid-template: 20px / minmax(0px, auto) 5px minmax(0px, min-content); }
     48 .gridFitContentAuto { grid-template: 20px / fit-content(100px) 5px minmax(0px, auto); }
     49 
     50 </style>
     51 
     52 <div class="float">
     53 
     54 <div class="grid gridMinContent">
     55    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
     56    <div class="abs col1"></div>
     57    <div class="abs col2"></div>
     58 </div>
     59 
     60 <div class="grid gridMinContent">
     61    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
     62    <div class="abs col1"></div>
     63    <div class="abs col2"></div>
     64 </div>
     65 
     66 <div class="grid gridMinContent">
     67    <div class="item min-width-max-content">XXXX XXXX</div>
     68    <div class="abs col1"></div>
     69    <div class="abs col2"></div>
     70 </div>
     71 
     72 <div class="grid gridMaxContent">
     73    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
     74    <div class="abs col1"></div>
     75    <div class="abs col2"></div>
     76 </div>
     77 
     78 <div class="grid gridMaxContent">
     79    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
     80    <div class="abs col1"></div>
     81    <div class="abs col2"></div>
     82 </div>
     83 
     84 <div class="grid gridMaxContent">
     85    <div class="item min-width-max-content">XXXX XXXX</div>
     86    <div class="abs col1"></div>
     87    <div class="abs col2"></div>
     88 </div>
     89 
     90 </div>
     91 
     92 <div class="float">
     93 
     94 <div class="grid gridMinMaxContent">
     95    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
     96    <div class="abs col1"></div>
     97    <div class="abs col2"></div>
     98    <div class="abs col3"></div>
     99 </div>
    100 
    101 <div class="grid gridMinMaxContent">
    102    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
    103    <div class="abs col1"></div>
    104    <div class="abs col2"></div>
    105    <div class="abs col3"></div>
    106 </div>
    107 
    108 <div class="grid gridMinMaxContent">
    109    <div class="item min-width-max-content">XXXX XXXX</div>
    110    <div class="abs col1"></div>
    111    <div class="abs col2"></div>
    112    <div class="abs col3"></div>
    113 </div>
    114 
    115 <div class="grid gridAutoMinContent">
    116    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
    117    <div class="abs col1"></div>
    118    <div class="abs col2"></div>
    119    <div class="abs col3"></div>
    120 </div>
    121 
    122 <div class="grid gridAutoMinContent">
    123    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
    124    <div class="abs col1"></div>
    125    <div class="abs col2"></div>
    126    <div class="abs col3"></div>
    127 </div>
    128 
    129 <div class="grid gridAutoMinContent" style="justify-items: start">
    130    <div class="item min-width-max-content">XXXX XXXX</div>
    131    <div class="abs col1"></div>
    132    <div class="abs col2"></div>
    133    <div class="abs col3"></div>
    134 </div>
    135 
    136 </div>
    137 
    138 <div class="float">
    139 
    140 <div class="grid gridFitContentAuto">
    141    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
    142    <div class="abs col1"></div>
    143    <div class="abs col2"></div>
    144    <div class="abs col3"></div>
    145 </div>
    146 
    147 <div class="grid gridFitContentAuto">
    148    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
    149    <div class="abs col1"></div>
    150    <div class="abs col2"></div>
    151    <div class="abs col3"></div>
    152 </div>
    153 
    154 <div class="grid gridFitContentAuto">
    155    <div class="item min-width-max-content">XXXX XXXX</div>
    156    <div class="abs col1"></div>
    157    <div class="abs col2"></div>
    158    <div class="abs col3"></div>
    159 </div>
    160 
    161 </div>