Grid Column Width Calculator
Grid Column Width Calculator
Enter the total width of your container or page, how many columns you want to divide it into, and the gutter (gap) width between columns. This calculates the exact width of each individual column, useful for both print grid layouts and CSS grid/flexbox web design.
12-column grids are the most widely used layout convention on the web, largely because 12 divides evenly by 2, 3, 4, and 6 — letting a design switch between halves, thirds, quarters, and sixths without any column ever needing an ugly fractional width. The exact same math applies just as well to print layout grids, magazine column layouts, or any design system where content needs to align consistently across a fixed number of vertical divisions, whether the medium is a web page or a printed page.
- Formula: Column Width = (Total Width − Gutter Width × (Columns − 1)) ÷ Number of Columns.
- Common web grid systems: 12-column grids are the most widely used layout convention (evenly divisible by 2, 3, 4, and 6), though 16-column grids are also common for more granular control.
- Works for print too: the same math applies to laying out columns of text or images on a printed page or poster, not just web design.
What gutter width should I use for a web layout?
16–24px is common for most web grids; print layouts often use a proportionally similar gutter relative to the page size.
Why 12 columns instead of 10?
12 is divisible by 2, 3, 4, and 6, making it much easier to create layouts with 2, 3, 4, or 6 equal-width sections — 10 only divides evenly by 2 and 5.
Grid Column Width Calculator
Enter the total width of your container or page, how many columns you want to divide it into, and the gutter (gap) width between columns. This calculates the exact width of each individual column, useful for both print grid layouts and CSS grid/flexbox web design.
12-column grids are the most widely used layout convention on the web, largely because 12 divides evenly by 2, 3, 4, and 6 — letting a design switch between halves, thirds, quarters, and sixths without any column ever needing an ugly fractional width. The exact same math applies just as well to print layout grids, magazine column layouts, or any design system where content needs to align consistently across a fixed number of vertical divisions, whether the medium is a web page or a printed page.
- Formula: Column Width = (Total Width − Gutter Width × (Columns − 1)) ÷ Number of Columns.
- Common web grid systems: 12-column grids are the most widely used layout convention (evenly divisible by 2, 3, 4, and 6), though 16-column grids are also common for more granular control.
- Works for print too: the same math applies to laying out columns of text or images on a printed page or poster, not just web design.
What gutter width should I use for a web layout?
16–24px is common for most web grids; print layouts often use a proportionally similar gutter relative to the page size.
Why 12 columns instead of 10?
12 is divisible by 2, 3, 4, and 6, making it much easier to create layouts with 2, 3, 4, or 6 equal-width sections — 10 only divides evenly by 2 and 5.