Grid System Visualizer

Most grids feel fine until real content lands. Set columns, gutters, max width and breakpoints, watch the live column overlay, then copy CSS Grid or Tailwind config that matches what you saw.

Open Spacing Calculator

Free Tool Design System

Tools Overview

Most grids feel fine until you try to place real content. Set columns, gutters, max width and breakpoints, watch the overlay sit on actual blocks, then copy CSS Grid or Tailwind config that matches what you saw.

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',
  }