Grid

Quarantine

The grid draws the 12-column rhythm. The container owns the page margins; the grid owns the columns — nest a grid inside a container for a page layout, or use it on its own inside a component or card (it has no side margin and needs no grid ancestor). Children place with the col-* span utilities; a bare child is a natural single column.

<div class="tng-grid">
  <div class="col-2-third">Main</div>
  <div class="col-1-third">Aside</div>
</div>

Main

Aside

Columns are separated by a fixed 20px gap (the column gutter); override it with the gap-* utilities if you need a different rhythm.

Columns

col-* sets how many of the grid’s 12 columns a child covers. Children auto-flow: siblings whose spans add up to 12 tile across a row on their own — no explicit column positioning needed. When a span doesn’t fit the remaining columns, it wraps to the next row.

Two layers are available:

• Named fractions — the readable, everyday choice, for the splits that divide cleanly into 12:

  Class	Spans	Columns
  col-half	1/2	6
  col-1-third	1/3	4
  col-2-third	2/3	8
  col-1-fourth	1/4	3
  col-3-fourth	3/4	9

• Numeric col-1 … col-12 — the complete scale, for any span the fractions don’t cover.

<div class="tng-grid">
  <!-- three cards tile across the row: 1–4 / 5–8 / 9–12 -->
  <div class="col-1-third">Card</div>
  <div class="col-1-third">Card</div>
  <div class="col-1-third">Card</div>
</div>

Card

Card

Card

Spans are static — they don’t change across breakpoints. Responsive column layouts (stack on mobile, split on desktop) are the is-{n}-up modifier’s job, not per-child breakpoint classes, so there are deliberately no col-{breakpoint}-* variants.

Note

The col-* classes ship in the utilities cascade layer (utilities/layout.css), even though they’re documented here with the grid — that layer position is what lets an explicit col-* override the is-{n}-up ramp (see Feature cells). They’re the grid’s placement API, so they live in these docs rather than among the cross-cutting flex/gap/alignment utilities.

Responsive columns

The is-{n}-up modifiers turn the grid into an equal N-up layout that is responsive on its own: children stack (1-up) on small screens and snap to N columns once the viewport is wide enough. The count is the responsive target; its breakpoint rides with it, so you set one class and get the whole ramp.

<div class="tng-grid is-3-up">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

Card

Card

Card

Modifier	Base–sm	md (≥768)	lg (≥1024) and up
is-2-up	1-up	2-up	2-up
is-3-up	1-up	1-up	3-up

Note

This is where responsive column layout lives — which is why the col-* spans are deliberately static. Reach for is-{n}-up for “stack on mobile, N-up on desktop”; reach for col-* for a fixed, bespoke split. Higher counts (is-4-up, is-6-up) are not shipped yet — they’ll follow when a design needs them.

Feature cells

A child with an explicit col-* opts out of the responsive ramp and keeps that span at every breakpoint, while its siblings keep stacking and snapping. Handy for a full-width “feature” row above an N-up grid.

<div class="tng-grid is-3-up">
  <div class="col-12">Feature — full width at every breakpoint</div>
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

Feature — full width at every breakpoint

Card

Card

Card

In a page layout

For a page layout, put a grid inside a .tng-container-v2 frame: the frame supplies the responsive page margins, the grid the 12 columns. The example below sketches a page — a full-bleed hero reaches the edge, then the grid lays the cards and a main/aside split across the 12 columns, and the footer spans the content width. tng-slot placeholders stand in for content.

Legacy: simple grid

.tng-simple-grid is the older auto-fit grid — equal-width columns that reflow by available width, unrelated to the 12-column system. It is retained for existing consumers but superseded by .tng-grid; new work should use the grid above.