Container

Quarantine

The container is the default 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

Full-width frame (.tng-container-v2)

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

Note

Margin values are hard-coded pixels that follow the spacing scale (20 / 40 / 56 / 80 / 96); wiring them to spacing tokens is a possible later cleanup.

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%); }