Grid & Layout

A 6-breakpoint responsive column grid system. Design at 3 canonical widths — clamp() and breakpoints handle everything in between.

Breakpoints

Breakpoint Definitions

Breakpoint Label Min Width Columns Margin Gutter Max Width
XS Extra Small 0px 4 12px 12px —
SM Small 360px 4 16px 16px —
LM Large Mobile 640px 8 24px 16px —
MD Medium 1024px 12 32px 24px —
LG Large 1280px 12 52px 24px —
LGX Large XL 1680px 12 auto 24px fixed center

Interactive

Grid Demo

Switch between breakpoints to see how the grid reconfigures. Column count, margins, and gutters update to match each breakpoint's spec.

LG · 1280px · 12 columns
margin: 52px gutter: 24px

Design Frames

Canonical Design Widths

Design at these 3 widths in Figma to cover all layout variations. Developers use clamp() and breakpoint tokens for intermediate sizes.

Frame Viewport Columns Represents
Desktop 1440px 12 LG — LGX range
Tablet 768px 8 LM range
Mobile 390px 4 XS — SM range

Behaviour

Grid Behaviour

XS — SM (4-col)

Fixed margins, content stretches to viewport width. XS uses tighter 12px margins/gutters.

LM (8-col)

Transition point at 640px — switches from 4 to 8 columns with 16px gutters.

MD — LG (12-col)

Full 12-column grid. MD uses 32px margins, LG uses 52px margins.

LGX (12-col, capped)

Content area uses fixed-center columns, auto margins center it.

Code

CSS Grid Reference

Copy-paste CSS for the responsive grid system.

/* XS: 0px+ — 4 columns, tight spacing */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-inline: 12px; } /* SM: 360px+ — 4 columns, standard spacing */ @media (min-width: 360px) { .grid { gap: 16px; padding-inline: 16px; } } /* LM: 640px+ — 8 columns */ @media (min-width: 640px) { .grid { grid-template-columns: repeat(8, 1fr); gap: 16px; padding-inline: 24px; } } /* MD: 1024px+ — 12 columns */ @media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, 1fr); gap: 24px; padding-inline: 32px; } } /* LG: 1280px+ — wider margins */ @media (min-width: 1280px) { .grid { padding-inline: 52px; } } /* LGX: 1680px+ — fixed center columns, auto margins */ @media (min-width: 1680px) { .grid { margin-inline: auto; padding-inline: 0; } }