| <!doctype html> |
| <html lang=en> |
| <meta charset=utf-8> |
| <title>CSS-contain reference: layout/paint containment on subgrid</title> |
| <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> |
| |
| <style> |
| .grid { |
| display: grid; |
| width: 40px; |
| height: 40px; |
| grid: [a] repeat(2,15px) [b] / [a] repeat(2,15px) [b]; |
| gap: 10px; |
| } |
| |
| .subgrid { |
| display: grid; |
| grid: none; |
| background: lightgrey; |
| grid-area:1/1/3/3; |
| } |
| |
| .layout { contain: layout; } |
| .paint { contain: paint; } |
| |
| .inner { |
| background: blue; |
| grid-area:a/a/b/b; |
| } |
| </style> |
| |
| <div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div> |
| <div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div> |
| <div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div> |
| <div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div> |
