Grid Calculator

Designing a layout grid shouldn't mean doing math.

Enter your frame width, the number of columns, gutter, and margins, and Grid Calculator works out the correct column width for you. If the numbers don't divide evenly, it shows you why and suggests nearby values that do.

When you're happy with the result, apply it directly as a Figma layout grid with a single click. You can also resize selected frames to the exact page width, add an optional baseline row grid, and copy matching CSS or Tailwind values for a smoother handoff to development.