Full-width

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.

Rides the staged breakpoints

The full-width frame and its partner .tng-grid switch on the staged grid-aligned tiers (sm 390, lg 1024, xl 1440), not the system-default breakpoints. That realignment is opt-in until a future major makes it the default, so a full-width layout won’t line up with the .hidden-* display utilities or other components until then.

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

Open in playground

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>

Open in playground

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

Open in playground

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