Design

Spacing & Grid Calculator

Generate spacing scales and grid systems with CSS custom property output.

:root {
  --space-0: 5px; /* 0.328rem */
  --space-1: 7px; /* 0.41rem */
  --space-2: 8px; /* 0.512rem */
  --space-3: 10px; /* 0.64rem */
  --space-4: 13px; /* 0.8rem */
  --space-5: 16px; /* 1rem */
  --space-6: 20px; /* 1.25rem */
  --space-7: 25px; /* 1.563rem */
  --space-8: 31px; /* 1.953rem */
  --space-9: 39px; /* 2.441rem */
}

About this tool

Spacing scale mode generates a modular scale using musical ratios — the same system used by Tailwind, Material Design, and most modern design systems. Grid mode calculates column widths based on your container, gutter, and margin values and outputs ready-to-use CSS.