Container

§Bound and center content

container has a 100% border-box inline size, an 80rem maximum, automatic inline margins and four density-adjusted base units of inline padding. The cap includes gutters. It does not change display or create a query container. Each instance owns its parameters: a nested container applies its own cap and gutter, not the outer ones. Resize the demo with the toolbar: the vertical ruler lines (one every 12px) mark the frame's width - as the frame outgrows each cap, that box stops growing and centers.

§Real world: a bounded article section

The everyday use: a page section that stays readable on any screen. The heading, lead and cards share one container - no media queries, no wrapper divs. Resize with the toolbar and watch the content clamp and center as a unit.

§Customize each instance

.reading-area {

  --layout-max: 70ch;

  --layout-gutter: clamp(1rem, 3vw, 2rem);

}

The maximum and gutter reset on every nested container. Override each root deliberately; an outer width limit is not inherited configuration. Container centering, gutters and the fixed 80rem default are extensions to Tailwind’s container behavior. A narrow container does not make overflowing child content safe automatically.

§A query boundary is explicit

query opts an element into inline-size containment under the name layout, so descendants can react to the space the component actually gets - not to the viewport. Both boxes below carry the same markup; the narrow one renders stacked, the fluid one flips to a title/actions row, driven only by each container's own inline size. Because the card's toolbar really resizes the sandbox, switching it to Phone carries the fluid box below the 24rem threshold and back.

The query selects the nearest ancestor named layout. It styles a descendant, not the query container itself. Inline-size containment changes intrinsic sizing, so it is opt-in; a shrink-to-fit query wrapper needs an externally determined width - the narrow demo sets inline-size explicitly for exactly this reason. The custom rule is unlayered, so it overrides the flex-col helper intentionally. Use literal query thresholds; custom properties are not breakpoint variables in size-query conditions.

§Platform references

CSS container queries · CSS logical properties

Comments, ideas or improvements? Edit this page's source on GitHub