📐 Space & Grid Calculator

A fluid spacing scale (T-shirt sizes on an 8pt grid by default) and a matching layout grid, each interpolating between a min and max viewport with a CSS clamp().

Min viewport

Width

Base size

Max viewport

Width

Base size

📏 Space scale

Size@min@max3xs

4px

5px

2xs

8px

10px

12px

15px

16px

20px

24px

30px

32px

40px

48px

60px

2xl

64px

80px

3xl

96px

120px

⬌ Space pairs

3xs → 2xs4px → 10px
2xs → xs8px → 15px
xs → s12px → 20px
s → m16px → 30px
m → l24px → 40px
l → xl32px → 60px
xl → 2xl48px → 80px
2xl → 3xl64px → 120px

🔭 Layout grid

Container max

Gutter @min

Gutter @max

Columns

Width@min@maxContainer320px1240pxGutter16px32pxColumn9.33px68.67px

Round @min column:

💻 Code Snippet

Format

:root {
  --space-3xs: clamp(0.25rem, 0.2321rem + 0.0893vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4643rem + 0.1786vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6964rem + 0.2679vw, 0.9375rem);
  --space-s: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3929rem + 0.5357vw, 1.875rem);
  --space-l: clamp(2rem, 1.8571rem + 0.7143vw, 2.5rem);
  --space-xl: clamp(3rem, 2.7857rem + 1.0714vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.7143rem + 1.4286vw, 5rem);
  --space-3xl: clamp(6rem, 5.5714rem + 2.1429vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.1429rem + 0.5357vw, 0.625rem);
  --space-2xs-xs: clamp(0.5rem, 0.375rem + 0.625vw, 0.9375rem);
  --space-xs-s: clamp(0.75rem, 0.6071rem + 0.7143vw, 1.25rem);
  --space-s-m: clamp(1rem, 0.75rem + 1.25vw, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.2143rem + 1.4286vw, 2.5rem);
  --space-l-xl: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
  --space-xl-2xl: clamp(3rem, 2.4286rem + 2.8571vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 3rem + 5vw, 7.5rem);
}

:root {
  --grid-max-width: 77.5rem;
  --grid-gutter: clamp(1rem, 0.7143rem + 1.4286vw, 2rem);
  --grid-columns: 12;
}

.u-container {
  max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
}

.u-grid {
  display: grid;
  gap: var(--grid-gutter);
}