Introducing the Grid

Back to What's New

The Grid is the layout primitive that draws the 12-column rhythm every page shares. It’s a thin, predictable wrapper over CSS Grid: 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.

Here’s the shape it’s built for — a full page layout. A full-bleed hero reaches the edge, then the grid lays a row of cards and a main/aside split across the 12 columns, and the footer spans the content width. The container supplies the responsive page margins; the grid does the rest.

Placing children

Children place with the col-* span utilities, and they auto-flow: siblings whose spans add up to 12 tile across a row on their own — no explicit column positioning needed. A bare child is a natural single column. When a span doesn’t fit the remaining columns, it wraps to the next row.

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

Named fractions (col-half, col-1-third, col-2-third, col-1-fourth, col-3-fourth) cover the splits that divide cleanly into 12; the numeric col-1 … col-12 scale covers anything else. Columns are separated by a fixed 20px gutter.

Responsive by default

Spans are deliberately static — they don’t change across breakpoints. Responsive column layouts are the job of the is-{n}-up modifiers, which turn the grid into an equal N-up layout: children stack on small screens and snap to N columns once the viewport is wide enough. 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>

A child with an explicit col-* opts out of that ramp and keeps its span at every breakpoint, so a full-width feature row can sit above an otherwise-responsive grid.

Full anatomy — the complete col-* table, the is-{n}-up breakpoints, feature cells, and the page-layout recipe above — lives on the Grid documentation page. If you’re still on the older .tng-simple-grid, that page also covers the migration.