35 lines
887 B
HTML
35 lines
887 B
HTML
<!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>
|