Skip to content

Container

Preview Available in release assets

Set the page gutter and establish an inline-size query container for its contents.

Container primary example

Show code
<section class="thin-container">
  <h2>Delivery and returns</h2>
  <p>These details stay inside the page gutter.</p>
</section>

Anatomy

  • Element with thin-container class
  • Inline-size query container
  • Page gutter on both inline sides

Variants and sizes

  • Page container
  • Query container for nested layouts

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Narrow viewport
  • Wide viewport
  • Nested container queries
  • Long localized content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

This layout owns no JavaScript behavior. Reading order, focus order, links, and scrolling stay native.

Accessibility

Layout changes position, never meaning. Keep source order logical, because it is the reading and focus order at every size.

Contract
PLATFORM
Basis
Native CSS layout and document defaults over semantic HTML; no APG widget

API

Add class=thin-container to a region. It keeps a theme gutter on both sides, caps the inline size, and establishes an inline-size query container for descendants such as Sticky sidebar and Dashboard shell.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Normal document flow remains readable if CSS is unavailable.

Assets and dependencies

  • /layouts.css

Dependencies: None

Source: packages/ui/src/style/layouts.ts

Composition

Derived from the examples and style specs, not authored.

Used by