What Is a Grid System?
A grid system divides a layout into consistent columns and gutters to create visual order and alignment. The 12-column grid is the most widely used in web design because 12 divides evenly into halves, thirds, quarters, and sixths — giving maximum layout flexibility.
The Column Width Formula
Column width = (container − gutter × (columns − 1)) ÷ columns. For a 1200px container with 12 columns and 24px gutters: total gutters = 24 × 11 = 264px; available width = 1200 − 264 = 936px; column width = 936 ÷ 12 = 78px.
Using CSS Grid
With CSS Grid you rarely need to calculate pixel widths manually. Set grid-template-columns: repeat(12, 1fr) and gap: 24px — the browser handles the math. The fr unit distributes remaining space equally after gutters are subtracted. Use the pixel calculation when working in design tools like Figma where you specify exact column widths.
Frequently Asked Questions
12 is divisible by 2, 3, 4, and 6, enabling full-width, half-width, one-third, and one-quarter layouts without fractional columns. This flexibility makes it the most versatile grid count for responsive design.
Following an 8pt grid system, use multiples of 8px (8, 16, 24, 32px). Dense information-heavy layouts like dashboards use 16px; marketing and editorial pages typically use 24–32px for breathing room.