Use it as the container of every page, whether or not anything on it goes wider than the content. A centered max-width wrapper is the sign, such as .container, .wrapper or Tailwind's mx-auto max-w-*. One grid on the section replaces the section > .container wrapper pair and costs no more than it, and any child can be content width, wider, or edge to edge. Put it on main for a page of flowing content, or on each section. A band, a figure or a block that an editor later wants wider then takes one class, with no negative margin and no new wrapper.
Why it works, the rules and the credits4 reasons · 4 rules · credits
Why it works
Two lines named content-start and content-end create a named area, content. That is why grid-column: content works with no line numbers.
min(100% - 2 × gutter, max) shrinks the content column on small screens with no media query.
minmax(0, …) lets the breakout tracks collapse, so a breakout falls back to content width when there is no room. With a fixed breakout size the page overflows on small screens.
grid-template-columns: inherit gives a full-width band the same grid, so content inside it lines up with the page column without another wrapper. This is Kevin Powell's addition. In Ryan Mulligan's original the full-width child is a plain box.
Rules
Every child must be placed. An unplaced child of the grid lands in the gutter track.
Every direct child is a grid item. Wrap a run of inline elements in one element.
Change a width by overriding --content, not by writing a new column template.
In a pass over existing CSS, replace each centered max-width wrapper with the grid, and keep the wrapper's width as --content on its section.
In other systems
The column template goes wherever the project defines reusable styles. Where child selectors are not available, as in StyleX or Tailwind without a custom variant, each child sets its own grid-column to content, breakout or full-width.
Use it for any pair where one side has an ideal width and the other takes the rest, such as a media object, an input with a button, or a page with an aside.
Why it works, the rules and the credits2 reasons · 4 rules · support · credits
Why it works
The main side's huge flex-grow takes all the free space, which holds the sidebar at its basis.
Once the main side would get less than half the container it wraps below, and both sides grow to full width.
Rules
The wrap point is a share of the container, not a length. Change min-inline-size to move it.
Drop the sidebar's flex-basis for a sidebar sized by its content.
For a sticky sidebar, add align-self: start beside position: sticky and its inset. The two sides stretch to the same height, and a stretched sidebar has no room to stick.
A bare img or video as one of the sides stretches to the height of the row and distorts. Set align-items: start on the container.
Support
Chrome
84
Firefox
63
Safari
14.1
Credits
Borrowed from: Heydon Pickering and Andy Bell, The Sidebar, Every Layout
Use it for any component that appears in slots of different widths. The component responds to the space it is given, where a media query only knows the viewport.
The wide slot lays the card out in two columns with a larger heading. Make the frame narrower until that slot is under 30rem: it becomes the narrow card.
Why it works, the rules and the credits2 reasons · 6 rules · support · credits
Why it works
The query measures the nearest container, so the same card is right in a sidebar and in a wide column.
1cqi is 1% of that container's inline size. The clamp() math from Fluid sizes with clamp() carries over, per component.
Rules
The container must be an ancestor. An element cannot query itself.
A container cannot take its width from its content. Never put container-type on a shrink-to-fit element, or it collapses to zero.
With no container ancestor the query never matches. Kevin Powell makes header, main and footer containers in his reset, so most components need none of their own.
Container units are different from queries. With no container above the element, cqi measures the viewport, so one token written with cqi serves the page and every slot.
Never register a fluid token that uses cqi with @property. A registered length computes once on :root, where there is no container, and every slot then gets the viewport's value.
Use it whenever things sit on top of each other, such as text over an image, a badge on a card, or two icons that swap. It replaces position: absolute with its offsets, sizes and transforms.
Use it wherever content is centered or end-aligned in a container that can become too small, such as a tab row, a toolbar or a vertically centered modal.