Layout grid calculator
Set container, columns, gutters and margins, see the grid drawn to scale and export CSS or Tailwind.
Column width is what's left after margins and gutters, divided by the number of columns. Text columns read best at 45 to 75 characters, so watch the estimate below.
Grids are agreements, not decoration
A grid is what lets a designer and a developer build the same page without talking about every edge. Fix three numbers, the container, the gutter and the margin, and everything else follows: column width, where a card can start and stop, how a layout reflows.
Twelve columns are popular because 12 divides into halves, thirds, quarters and sixths. Fewer columns are fine and often calmer. What matters more is that the resulting text column stays inside a readable measure, and that your gutters come from the same spacing scale as the rest of your spacing.
Learn more
Want experts to fix it for you?
Bad Design designs and builds B2B websites that turn visitors into leads.