Grid system

A grid system structures page layout — columns, gutters, margins and breakpoints — so every screen aligns to the same underlying rhythm. Most modern grid systems are responsive: 4 columns on mobile, 8 on tablet, 12 on desktop, with spacing values pulled from the same scale every other component uses.

Grid systems pre-date design systems (newspapers had them in the 1700s) but the discipline they impose is what makes layouts feel intentional rather than accidental. In a design system the grid is part of foundations and usually expressed as breakpoint tokens plus a layout component (<Container>, <Grid>) that components compose into.

Related: Foundations · Spacing scale · Design tokens