Grid — N-up

Layouts · Grid

Responsive N-up

The is-{n}-up modifiers turn .tng-grid into an equal N-up layout that stacks on small screens and snaps to N columns once the viewport is wide enough. Resize the window to watch each ramp fire — the whole page is framed by .tng-container-v2, not Starlight's prose column.

is-2-up

1-up below md, then 2-up from md (≥768px) up.

1

2

3

4

is-3-up

1-up below lg, then 3-up from lg (≥1024px) up.

1

2

3

4

5

6

Feature cell

A child with an explicit col-* opts out and holds its span at every breakpoint while its siblings keep stacking and snapping.

col-12 — full width at every breakpoint

1

2

3

tng-container-fullbleed

Composes onto a full-width child to pull it out of the container margins and sit edge-to-edge with the viewport. Here the whole is-3-up grid bleeds while the heading stays within the frame — so the ramp still fires, now spanning the full width.

Full bleed col-12

1

2

3