Grid System
A structured framework of columns, gutters, and margins that governs where elements can be placed in a layout.
Plain English
A grid system is the invisible scaffolding that makes multi-column layouts feel cohesive. Instead of positioning elements wherever they look right, a grid defines fixed columns (usually 12 or 16) and gutters (the spaces between columns), and every element snaps to this structure. The 12-column grid has become the web standard because 12 divides cleanly into 2, 3, 4, and 6 — allowing halves, thirds, quarters, and sixths without fractions.
Technical
Web grid systems: CSS Grid with repeat(12, 1fr) + column-gap for gutters, or Flexbox with percentage widths. Standard specs: 12 columns, 24px gutters, 24px outer margin. Tailwind uses a 12-column grid via col-span utilities. Responsive grids collapse from 12 → 6 → 4 → 2 columns as the viewport narrows. The grid defines where elements start and end (grid-column: 1 / 7 = first 6 columns). Breaking the grid intentionally (a full-bleed image, an oversized heading) is most effective when the rest of the layout follows it strictly.
Live Demo
12-Column Grid System
12 equal columns
Full — col-span-12
Two halves — col-span-6
Three thirds — col-span-4
Sidebar layout — 3 + 9
12-column grids are standard because 12 divides into 2, 3, 4, and 6 equally.
Usage
✓ Good usage
Define a 12-column grid with 24px gutters and assign every element to a column span — cards span 4 columns (3-up), full-width sections span 12.
✗ Bad usage
Placing elements at arbitrary pixel positions rather than on a grid — the layout looks ordered from far away but misaligns slightly everywhere.
Recommended values
- Standard: 12 columns, 24px gutters, 24px side margins
- Tight: 12 columns, 16px gutters (data-dense dashboards)
- Loose: 12 columns, 32px gutters (editorial layouts)
- Mobile: 4 columns, 16px gutters
- Tablet: 8 columns, 20px gutters
Common mistakes
- Designing at 1440px without specifying gutters — the grid breaks at other widths.
- Elements that span non-standard column counts — a 5-of-12 column element breaks the visual rhythm.
- No mobile grid spec — the desktop grid does not automatically collapse gracefully.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use a 12-column grid, 24px gutters. 3-column content: col-span-4 each. 2-column split: 8/4 (main/aside). Full-width: col-span-12. Reduce to 4-column grid on mobile with 16px gutters. All content aligns to the grid — no arbitrary positioning.