Skip to content
UX Atlas
Plate FND·041 · UI foundationGrid C2 · Rev. 2026-08-14

Containers

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

UI foundationCraft conventionFoundational

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 plate
  1. 1Definition
  2. 2Container widths by content type
  3. 3Container queries
  4. 4Constraining width
  5. 5In practice
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Setting page and content widths.
  • Building reusable components.
  • Reviewing layouts on very wide displays.
  • A component is reused at several widths and is starting to grow variants.

Common mistakes

  • Unconstrained prose width.
  • Components that assume viewport width equals available width.
  • Container padding that disappears at small viewports.

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.

Constraining width

Do

  • Set a maximum width for text, and let backgrounds run full bleed.
  • Pick the constraint from the content type, not from a device width.
  • Use container queries so a component adapts to its slot rather than the viewport.
  • Keep horizontal padding responsive, so content never touches the edge.

Do not

  • Let paragraphs run the full width of a wide monitor.
  • Constrain a data table to a reading measure, which forces horizontal scroll for no reason.
  • Use one container width for every page in the product.

In practice

  1. i.

    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.

  2. ii.

    One card, three widths

    What container queries changed

    The same card sat in a sidebar, a two-column grid and a full-width list. Before container queries this meant three variants. After, it means one component that asks how much room it has.

Local chart

FND·041 · Region II · Grid C2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

CardCMP·022 · APPLIED THROUGHBreakpointTERM·044 · SHORT DEFINITIONContainer QueryTERM·070 · SHORT DEFINITIONMeasureTERM·062 · SHORT DEFINITIONResponsive DesignTERM·043 · SHORT DEFINITIONReflow and ZoomA11Y·013 · RELATED CONCEPTComponent API DesignSYS·002 · RELATED CONCEPTBreakpointsFND·045 · RELATED CONCEPTColumnsFND·040 · RELATED CONCEPTCommon RegionFND·006 · RELATED CONCEPTCompositionFND·014 · RELATED CONCEPTGridsFND·039 · RELATED CONCEPT

Sources

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

  1. [1]

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.

  • CardCMP·022 · Component

Short definition

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

Related concept

Connected closely enough to change how you apply this.