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>