Brand PeelBrand Peel (Alpha)

Grid System Visualizer

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.
Open Spacing Calculator
Free Tool Design System
Tools Overview

Grid System Visualizer

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 HubBuild Stack

Brand System & Design Handoff

Build visual tokens

Starter Kits Including This Tool

Layout foundation

Design System

Adjacent Brand Foundations Brand Governance Developer Marketing
PreviousNext
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.

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