(but makes CQs impossible)
Container queries will never be possible on the web. They would cause infinite layout loops.
— Browsers, a paraphrase (circa 2020)
contain: size | layout | style | paint;
Block boxes get their
inline-size
from Context (extrinsic).
— Me, yesterday
Block boxes get their
block-size
from Content (intrinsic).
— Me, yesterday
inline-size
For Most Containers
size
For Scroll Containers
container-type: inline-size;
contain
: inline-size layout style;
main {
container: layout main / inline-size;
}
container-name
[/ container-type
]?@container layout (min-width: 40em) {
.conditional { /* … */ }
}
@container main (min-width: 40em) {
.conditional { /* … */ }
}
(That would introduce loops!)
(can’t change what you measure!)
No element to measure…
body > :is(header, main, footer, aside) {
container: layout / inline-size;
}
cqw
| cqh
| cqi
| cqb
| cqmin
| cqmax
@container style(--colors: invert) { … }
Unless you query a specific container-name
* for now **
** but maybe forever?
@container state(stuck) { … }
@container state(snapped) { … }
@container state(overflowing) { … }
/* explicit fallbacks, rarely needed */
@supports not (container: name) { /* … */ }
skip…
.grid-span {
width: percentage( /* 23.7288136% */
((3 * 4em) + (2 * 1em)) / ((12 * 4em) + (11 * 1em))
);
margin-right: percentage( /* 01.6949153% */
1em / ((12 * 4em) + (11 * 1em))
);
padding-left: percentage( /* 08.4745763% */
((1 * 4em) + (1 * 1em)) / ((12 * 4em) + (11 * 1em))
);
}
skip…
skip…
skip…
skip…
skip…
skip…
skip…
skip…
skip…
skip…
skip…
skip…
Generate columns
& rows
as needed
column
| column
[+ dense
]
grid-<axis>-start
& grid-<axis>-end
<tracks>
min-content
, 1fr
)
fit-content(
<limit>
)
clamp(auto, max-content,
<limit>
)
with matching *-start
& *-end
names
repeat(
<count>, <tracks>
)
as column or row template