Layout Grid Tokens — Column, Gutter, and Container Width Tokens

Layout Grid as Design Tokens

Layout grids are traditionally defined in CSS frameworks (Bootstrap, Foundation) or Figma auto-layout settings. By expressing grid parameters as design tokens, you create a single source of truth that both designers and developers reference.

Core Grid Tokens

:root {
  --layout-columns: 12;
  --layout-gutter: 1.5rem;
  --layout-margin: 1rem;
  --layout-max-width: 1280px;
}

@media (min-width: 768px) {
  :root {
    --layout-gutter: 2rem;
    --layout-margin: 2rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --layout-margin: auto;
  }
}

Container Tokens

Define multiple container widths for different content types:

{
  "layout": {
    "container-sm": "640px",
    "container-md": "768px",
    "container-lg": "1024px",
    "container-xl": "1280px",
    "container-2xl": "1536px",
    "content-width": "65ch"
  }
}

Using Grid Tokens

Apply grid tokens in CSS Grid or Flexbox layouts:

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

.grid {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), 1fr);
  gap: var(--layout-gutter);
}

Breakpoint Tokens

Breakpoints themselves can be tokens, though CSS custom properties cannot be used in media query conditions. Store them in your token file for tooling and documentation:

{
  "breakpoints": {
    "sm": "640px",
    "md": "768px",
    "lg": "1024px",
    "xl": "1280px"
  }
}