Container

The container is the page wrapper that keeps content off the viewport edges. It comes in two flavours:

Default — centres content and caps it at a maximum width. The everyday page wrapper; use this unless you specifically need the full-width layout.
Full-width — an opt-in, full-browser-width frame that pairs with the .tng-grid primitive for a 12-column page layout. It rides the staged grid-aligned breakpoints (not the system default).

Usable — may still change

The default container is the everyday page wrapper: it centres content and caps it at a maximum width (1140px at xl, 1440px at 2xl), with a responsive side margin either edge. A bare child sits in the centred content track; add .is-fullbleed to break a child out across the margins to the viewport edge.

<section class="tng-container">
  <!-- centred content, capped at the max width -->
</section>

Max width

The container centres its content and caps how wide it grows. Below xl the content fills the width inside a responsive margin; from xl it stops widening and centres.

Breakpoint	Behaviour
`<xl`	fills the width, responsive margin
`xl`	capped at 1140px, centred
`2xl`	capped at 1440px, centred

Fullbleed

By default every child stays within the centred content track. Add the is-fullbleed class to let a child span the full grid — across the margin tracks too — and reach the viewport edge.

<section class="tng-container">
  <div>Stays in the centred content track</div>
  <div class="is-fullbleed">Reaches the viewport edge</div>
</section>

Stays in the centred content track

Reaches the viewport edge

For a full-browser-width page layout, opt into .tng-container-v2: a page frame whose one job is the responsive side margin that keeps content off the viewport edges. It has no max-width and does not draw columns — nest a .tng-grid inside it for the 12-column layout. A child reaches past the margins to the viewport edge with the .tng-container-fullbleed class.

<section class="tng-container-v2">
  <!-- content sits inside the responsive side margins -->
</section>

The frame keeps a side margin on both edges that grows with the viewport. It is full-width — no max-width — so the margin is the only thing that changes across breakpoints. In the demos below the tinted band on each side is the margin; the muted block is the content area.

Breakpoint	Viewport	Margin
Base (XS)	`<390`	20px
`sm`	`≥390`	40px
`md`	`≥768`	56px
`lg`	`≥1024`	80px
`xl`	`≥1440`	96px

Base (XS)

sm

md

lg

xl

Fullbleed

On the frame, add the tng-container-fullbleed class to let a full-width child reach past the margins to the viewport edge. It works at any depth — a direct child, or a full-width col-12 inside a nested .tng-grid.

<section class="tng-container-v2">
  <div>Stays within the margins</div>
  <div class="tng-container-fullbleed">Reaches the viewport edge</div>
</section>

Stays within the margins

Reaches the viewport edge

Content width

The frame is an inline-size query context and exposes one custom property that inherits to every descendant:

Property	Value
`--tng-container-inline-size`	the content width (viewport − 2 · margin)

It is derived from 100cqi, so it tracks the current breakpoint automatically and resolves for descendants at any nesting depth. It is undefined outside the frame — always supply a var(…, fallback) so a component that reads it degrades gracefully when used standalone.

.my-thing { /* never wider than the page content area */
max-inline-size: var(--tng-container-inline-size, 100%); }

.my-thing { /* never wider than the page content area */ max-inline-size: var(--tng-container-inline-size, 100%); }