Design Spacing and Grid Calculator

Inconsistent spacing is one of the subtlest ways a design can look unpolished without anyone being able to say exactly why. When buttons have 11px of padding, cards have 13px, and modals have 16px, the design feels slightly "off" even to non-designers. A spacing scale — a set of predefined spacing values that your entire team uses — prevents this by making inconsistency impossible rather than just discouraged.

The Base-8 Spacing System

The most widely used approach is a base-8 (or base-4) system:

Token	Value	Uses
space-1	4px	Tiny: icon gap, inline badge padding
space-2	8px	Small: compact padding, between related items
space-3	12px	Minor spacer
space-4	16px	Standard: default padding, list item gap
space-5	20px	Medium: card padding on mobile
space-6	24px	Standard card padding
space-8	32px	Section gaps within a card
space-10	40px	Between components
space-12	48px	Section padding
space-16	64px	Page section gaps
space-20	80px	Hero padding
space-24	96px	Large layout gap

The base-8 system maps naturally to Tailwind CSS (which uses 4px units: p-4 = 16px, p-6 = 24px, gap-8 = 32px), making design-to-code translation seamless.

Using the CalcHub Spacing Calculator

At CalcHub, enter your base unit (4px or 8px) and scale factor. The calculator generates:

• A complete spacing scale with named tokens
• CSS custom properties ready to use
• Tailwind config spacing object
• Grid configuration (columns, gutter, margin)

For grids specifically, enter your container width, number of columns, and gutter preference. The calculator outputs column widths in px and percent, shows how content fits within the grid, and flags if your gutter choices create non-round numbers.

12-Column Grid Math

The 12-column grid is standard because 12 divides evenly by 2, 3, 4, and 6 — giving you flexible layout options. For a 1200px container with 24px gutters:

• Gutter total: 11 gutters × 24px = 264px
• Available for columns: 1200 - 264 = 936px
• Per column width: 936 / 12 = 78px

Spanning N columns: (78 × N) + (24 × (N-1))

Spans	Width
1 col	78px
2 cols	180px
3 cols	282px
4 cols	384px
6 cols	588px
8 cols	792px
12 cols	1200px

Spacing for Different Contexts

Context determines appropriate density:

Context	Recommended Density	Padding Example
Data-dense table	Compact (4–8px)	py-1 px-2
List items	Normal (8–12px)	py-2 px-3
Cards / panels	Comfortable (16–24px)	p-4 or p-6
Modal / drawer	Relaxed (24–32px)	p-6 or p-8
Hero / landing	Generous (48–96px)	py-20 px-6
Marketing sections	Spacious (80–120px)	py-24

Tips

• Stick to your scale. The temptation to use 15px "just this once" is where inconsistency starts. If 12px and 16px both feel wrong, your scale might be missing a step — add space-3.5: 14px rather than freestyle.
• Spacing tokens in Figma: Tailwind CSS and Figma both support numeric spacing tokens. If your design tool and code share the same scale, the handoff becomes trivial — the designer uses space-6 and the developer uses p-6.
• Responsive spacing: Section gaps often need to be smaller on mobile. Using clamp() for spacing (like font sizes) is increasingly common in modern layouts.

Why base-8 instead of base-10?

Base-10 sounds more natural, but base-8 (and base-4) divides more evenly: half of 8 is 4, half of 4 is 2, and these are common sub-values. Base-10 gives you 5px halves, which are less useful. Also, browser default font size is 16px (2×8), making base-8 spacing naturally harmonious with default typography.

How should spacing scale with font size?

Related elements (like the gap between a label and its input field) should scale with font size — use em units for these. Layout spacing (between sections, cards, major elements) should be independent of font size — use rem or fixed px values from your spacing scale.

What's the CSS Grid way to do columns?

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1200px;
}

This creates a 12-column grid with 24px gaps. The 1fr (fractional unit) columns automatically resize to fill available space after accounting for gaps.

Related Calculators

• Typography Scale Calculator — pair your spacing scale with a type scale
• Font Size Calculator — responsive font sizing alongside spacing
• Icon Size Calculator — size icons to harmonize with your spacing system