tor-browser

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

contain-subgrid-001.html (887B)


      1 <!doctype html>
      2 <html lang=en>
      3  <meta charset=utf-8>
      4  <title>CSS-contain reference: layout/paint containment on subgrid</title>
      5  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
      6 
      7 <style>
      8 .grid {
      9  display: grid;
     10  width: 40px;
     11  height: 40px;
     12  grid: [a] repeat(2,15px) [b] / [a] repeat(2,15px) [b];
     13  gap: 10px;
     14 }
     15 
     16 .subgrid {
     17  display: grid;
     18  grid: none;
     19  background: lightgrey;
     20  grid-area:1/1/3/3;
     21 }
     22 
     23 .layout { contain: layout; }
     24 .paint { contain: paint; }
     25 
     26 .inner {
     27  background: blue;
     28  grid-area:a/a/b/b;
     29 }
     30 </style>
     31 
     32 <div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div>
     33 <div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div>
     34 <div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div>
     35 <div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div>