Column Grid Calculator for Figma and Web Design

A column grid divides a layout into equal vertical columns separated by gutters. Designers snap text, images and components to column edges, which keeps spacing consistent, speeds up layout decisions, and makes pages easier to scan.

Subtract all the gutters from the overall width, then divide by the number of columns: column = (width − (columns − 1) × gutter) ÷ columns. Example: a 960 px grid with 8 columns and 24 px gutters gives (960 − 168) ÷ 8 = 99 px columns.

A 12-column grid is the web standard because 12 divides evenly into 2, 3, 4 and 6, so halves, thirds and quarters all work. Tablets often use 8 columns and phones use 4. 16 columns give finer control for dense dashboards. Pick the count that supports the layouts you actually need.

Common gutter widths are 16, 24 and 32 px. Tight gutters suit dense product interfaces, and wider gutters suit editorial and marketing pages. Many teams choose gutters from an 8 pt spacing scale so they line up with the rest of the design system.

Margins sit outside the first and last columns and set the space between the grid and the edge of the screen. Gutters sit between columns. They are set independently and are often different sizes.

Fractional column widths such as 78.333 px can cause blurry edges and half-pixel misalignment on standard-density screens. This calculator only lists gutter and column combinations where the column width is a whole number.

A fixed grid uses set pixel widths at each breakpoint. A fluid grid uses percentages or fractional units so columns stretch with the viewport. Most responsive design systems combine both: fluid columns inside a max-width container, with column counts that change at breakpoints.

A typical setup is 4 columns for mobile (around 375 px), 8 columns for tablet (around 768 px) and 12 columns for desktop (1200 to 1440 px). Your product and audience should decide the exact breakpoints.

The 960 grid is a classic web layout width. 960 px divides evenly by many numbers (2, 3, 4, 5, 6, 8, 10, 12 and 16), which makes it easy to build 12- and 16-column grids with whole-pixel columns. Try 960 with 12 or 16 columns in the calculator above.

A baseline grid controls vertical rhythm by aligning lines of text to evenly spaced horizontal lines, for example every 8 px. It works alongside the column grid, which handles horizontal structure.

Click Copy SVG on the row you want, select your frame or canvas in Figma, and press Ctrl/Cmd + V. Figma converts the SVG into vector rectangles you can align to your frame. For a live overlay, you can also add a Layout Grid in Figma's right panel using the same column count and gutter.

Yes. Use display: grid with grid-template-columns: repeat(12, 1fr) and set column-gap to your gutter width. The column widths in the table are what each column resolves to at the overall width you entered.