Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Containers

The constraint that stops content spreading to unusable widths, and increasingly the unit that components respond to.

Definition

A container bounds content width and provides consistent horizontal padding. With container queries, containers also become the reference for component-level responsive behaviour, replacing viewport assumptions.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Container widths by content type
  3. Container queries
  4. In practice
  5. Sources
  6. Continue from here

Container widths by content type

ContentMax widthReason
Continuous prose60 to 70ch, about 640 to 720pxReadable measure.
Marketing pages1100 to 1280pxRoom for imagery and multi-column sections.
Application shellsFull widthTools use available space; content columns are constrained inside.
Data tablesFull width with horizontal scrollTruncating columns is worse than scrolling.
Forms480 to 640pxSingle column, comfortable field width.

Container queries

css
.card-host { container-type: inline-size; container-name: card; }

.card { display: grid; gap: var(--space-3); }

@container card (min-width: 28rem) {
  .card {
    grid-template-columns: 8rem 1fr;
    align-items: start;
  }
}

The component adapts to the space it is actually in, which makes it reusable in a sidebar and in a wide grid without variants.

In practice

Reusable card without variants

Design systems

One card component that reflows based on its own width replaces a family of size variants and the documentation explaining when to use each.

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applied through

Where this shows up as a concrete interface decision.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.