tor-browser

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

column-intrinsic-maximums.html (4540B)

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