What is an 8pt grid?
An 8pt grid is a design rule that keeps every spacing and size value a multiple of 8. Most platforms — iOS, Android, and Material Design — use 8px as their base unit, so sticking to multiples of 8 keeps layouts pixel-perfect across different screen resolutions. Designers often pair it with a 4pt grid for finer adjustments like icons and text spacing.
This calculator generates a standard spacing scale from 0.5× to 12× once you enter a base unit. Enter any value you want to check, and it tells you the nearest grid-aligned value both above and below — so you can pick a consistent number instead of guessing. Use it as a quick reference when defining spacing tokens in Figma or CSS variables.
Frequently Asked Questions
A design rule where every spacing and size value is a multiple of 8, keeping layouts aligned across different screen resolutions.
Use 4pt for fine adjustments like icons, and 8pt for general layout spacing — most design systems use both.