Section
The full-width band, and the outermost one is the page's container boundary — background, clip, and the guide overlay. Spacing lives on the Stack inside it.
Each example measures itself, so its gutters are to scale rather than to the page's. The arrangements are exact.
The outermost Section establishes container-type: inline-size (so descendant fluid spacing rebases to its width) and paints the band: bg, and later gradient / mode. It owns no spacing — that moved to Stack, which is why one Section can hold one or many Stacks.
clip (default on) keeps a cover image or a bottom-anchored figure inside the band; turn it off for deliberate bleed.
as swaps the element the band renders, so a page built from Sections still emits real landmarks — see below. Every prop is editable in Properties.
Full-bleed band
The band paints edge to edge; the Stack inside it holds the measure.
Two things that have to be visible together, which is why this is an example and not a control — and the reason the cap lives on Stack rather than on Section, which would narrow the painted box and kill the bleed.
The cap is a width, not a container: spacing inside it still measures the Section, so the gap here is the gap an uncapped Stack in this band would get. Same for the breakpoints in a lane set — they measure the Section, not the cap.
Section group
Rows in one composition, and not one spacing prop between them.
Each row sets only lanes. The cap is declared once, on the parent, so every row shares a content box and their lane edges land on the same lines.
This is the route to reach for when the rows are one composition. The vertical space between them is the parent's gap, which is the same value as the gap between lanes — so the page has one rhythm without anyone choosing a number.
Section group (alternative)
The same picture from siblings, and what siblings cost.
Because a Section is a plain block that owns no spacing, three Stacks can sit in it directly and each brings its own — which is why no grouping component is needed.
The cost is that every row now declares everything. The middle row gives up both paddings so each seam carries one instead of two, and the cap is written three times — let one drift and the lanes stop aligning. Reach for this when the rows are separate bands sharing a shell; nest them when they are one composition.
as a Section
The element changes and nothing else does.
The union is section (default), div, header, nav, aside, footer, article — constrained rather than open polymorphism, so the band is always a block container, as="button" is deliberately unreachable, and the Properties control stays a select.
Naming is half the job. An unnamed <section> is no landmark at all and an unnamed <nav> is an anonymous one, so pair either with aria-label. The exception is on screen above: <header> and <footer> only claim a landmark outside main, article, aside, nav and section — inside <main> they are ordinary introductory content, which is exactly what a page-title band wants.
queryContainer
A new ruler, not a grouping tool.
Same three lanes as the rendering at the top of this page, but the third is a Section carrying queryContainer. That prop is what makes it a query container, so its contents measure it, about a third of the width, and its gap and edge padding come out roughly a third of the band's. Nothing inside it was told to change.
Nested, it has to be asked for. A Section inside another leaves the ruler and the inline edge alone by default, so a page has one grid and lanes at any depth share their gutters. Vertical rhythm is untouched either way — there is no vertical grid to break. queryContainer is the way out, and it is a real claim: this band stops aligning with the page.
Right for a card or a panel that should read as self-contained; wrong as a way to group things, since the inner rhythm won't match its neighbours. Grouping is a Stack's job, and a Stack keeps the band's rhythm because a Slot is not a container. The floor in clamp(16px, 4cqi, 48px) is what stops a narrow Section going from tighter to tiny.