How to Calculate Grid Columns and Gutters
In web and app design, a grid system divides the screen into consistent columns that everything else aligns to. Column width is calculated as (container width โ left/right margin โ total gutter width) รท column count. Gutter is the space between columns, so there's always one fewer gutter than columns, while margin is applied once on each side of the container.
For example, a 1200px container with 12 columns, a 24px gutter, and a 24px margin gives a content area of 1200 โ 48 = 1152px. Total gutter width is 24 ร 11 = 264px, so each column comes out to (1152 โ 264) รท 12 = 74px. A 12-column grid is standard for desktop, 8 columns for tablet, and 4-6 columns for mobile.
Use the calculated column width directly in CSS Grid's grid-template-columns, as a Flexbox percentage, or as an fr unit. Setting the same values in design tools like Figma or Sketch keeps your design and development grids perfectly in sync.
Frequently Asked Questions
Gutter is the space between columns; margin is the outer padding on each side of the container.
12 for desktop, 8 for tablet, and 4-6 for mobile are common defaults.
Convert it to a CSS Grid fr unit or a percentage for smooth responsive behavior.