Design Grid Calculator
Column Grid
Calculate column widths from a total width
Responsive Breakpoints
Calculate grid at common breakpoints
Baseline Grid
Calculate a baseline grid for vertical rhythm
Formula
Column Width = (Total Width - 2 × Margin - (Columns - 1) × Gutter) / Columns | Baseline Unit = Font Size × Line Height
Frequently Asked Questions
What is a design grid?
A design grid is a system of columns, gutters, and margins that creates a consistent framework for placing content. The most common web grid is 12 columns because 12 is divisible by 2, 3, 4, and 6.
What is a gutter in a grid?
A gutter is the space between columns. Standard gutter widths are 16-32px for web design. Gutters provide breathing room between content areas and improve readability.
What is a baseline grid?
A baseline grid is a horizontal grid based on your line height. All spacing and element heights align to multiples of the baseline unit, creating consistent vertical rhythm throughout the design.
You may also need
~
Golden Ratio Calculator
Free golden ratio calculator. Calculate golden ratio proportions, golden rectangle dimensions, and Fibonacci-based design measurements.
Everyday~
Typography Scale Calculator
Free typography scale calculator. Generate harmonious font size scales using musical ratios, golden ratio, and custom ratios for web and print design.
Everyday~
Rule of Thirds Calculator
Free rule of thirds grid calculator. Calculate grid lines and power points for any image or canvas size for photography and design composition.
Everyday