Container bands
A .container turns its region into a band grid and spans every column as
a subgrid. Each child drops into a band: xs through xl cap
and center at the matching breakpoint, full fills minus the gutters, and
bleed runs edge to edge. Children default to lg.
Seven children of one container, each placed with data-container. The
widths nest from bleed down to xs.
One default for every child
Set data-container on the container and every child lands in that band
unless it sets its own data-container. This section defaults to
md, so the heading and this paragraph sit at 64rem.
@md:container and @max-md:container
A responsive container is a band subgrid for only part of the range and a plain block
the rest. @md:container aligns to the bands at md and up;
@max-md:container aligns below md and falls back to a normal grid above
it. Resize to watch each switch.
@md:container · stacks full width below md; at md and up the second child moves into the sm band.
@max-md:container · a two column grid at md and up; below md it becomes a band container so its first child drops into the xs band.
Article reading width
A measure tuned for long-form text.
Add data-variant="article" to a container and it becomes a centered,
character-based reading column instead of a band subgrid. The width comes from the
--article-* tokens, defaulting to lg at roughly 70 characters.
Pick a different measure with data-container: xs is 45ch,
sm 50ch, md 65ch, lg 70ch, xl 75ch.
For full or bleed widths, use a plain band container instead, since the article variant
only defines the reading sizes.