Grid System Visualizer

Set columns, gutters, max-width, and breakpoints. Preview the column overlay live and export CSS Grid, Tailwind config, and breakpoint tokens.

Open Spacing Calculator

Free Tool Design System

Tools Overview

Define a grid system with columns, gutters, max-width, and breakpoints. Preview the column overlay live and export CSS Grid, Tailwind config, and breakpoint tokens.

Catalog Context Part of Design System

See how this tool connects to category hubs, workflow paths, starter kits, and adjacent next steps.

Category Hub Build Stack

Brand System & Design Handoff

Build visual tokens

Starter Kits Including This Tool

Layout foundation

Design System

Adjacent Brand Foundations Brand Governance Developer Marketing

Previous Next

Next Move - Strong resultDesign System

Recommended: Design Token Starter Generator

Grid system is ready. Capture it alongside color, type, and spacing tokens.

Generate token baseline

Grid Controls

Pick a column count, gutter, max-width, and breakpoints.

Column count

Gutter width (px)

Max width (px)

Breakpoints

Visual Preview & Export

See the column overlay and sample content blocks.

Sample content blocks

Full

span 12 / 12

Half

span 6 / 12

Third

span 4 / 12

Quarter

span 3 / 12

CSS Variables

:root {
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-max-width: 1280px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

Grid Container CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-gutter);
}

Tailwind Config

gridTemplateColumns: {
  columns: 'repeat(12, minmax(0, 1fr))',
},
gap: { gutter: '24px' },
maxWidth: { container: '1280px' },
screens: {
    'sm': '640px',
    'md': '768px',
    'lg': '1024px',
    'xl': '1280px',
    '2xl': '1536px',
  }