12-Column Grid System

Visual grid demonstration with overlay

Toggle grid lines to see the structure

✨ Now featuring fluid typography that scales smoothly!

Container Size Comparison

All containers are centered (mx-auto) - see how they compare

container
Responsive breakpoints
Measuring...
max-w-full
100% width
Measuring...
max-w-7xl
80rem (1280px max)
Measuring...
max-w-6xl
72rem (1152px max)
Measuring...
max-w-5xl
64rem (1024px max)
Measuring...
max-w-4xl
56rem (896px max)
Measuring...
max-w-3xl
48rem (768px max)
Measuring...
max-w-2xl
42rem (672px max)
Measuring...
max-w-xl
36rem (576px max)
Measuring...
max-w-lg
32rem (512px max)
Measuring...
max-w-md
28rem (448px max)
Measuring...
max-w-sm
24rem (384px max)
Measuring...

When to Use Each Container Size

Small Content:
  • • max-w-sm - Buttons, small cards
  • • max-w-md - Forms, modals
  • • max-w-lg - Single column text
Large Content:
  • • max-w-4xl - Blog posts, articles
  • • max-w-6xl - Dashboards
  • • max-w-7xl - Full page layouts

Grid Column Widths

Different ways to span columns in a 12-column grid system

Full Width (col-span-12)
Half Width (col-span-6)
Half Width (col-span-6)
Sidebar
(col-span-3)
Main Content (col-span-9)

Grid Gutter Widths

How different gap sizes affect column spacing and available content width

gap-0 (No spacing)

Sidebar
Main Content - Full width, no gutters

gap-2 (0.5rem / 8px)

Sidebar
Main Content - 8px gutters

gap-4 (1rem / 16px) - Common default

Sidebar
Main Content - 16px gutters

gap-6 (1.5rem / 24px)

Sidebar
Main Content - 24px gutters

gap-8 (2rem / 32px)

Sidebar
Main Content - 32px gutters

Multiple Columns with gap-4

Col 1
Col 2
Col 3
Col 4
Col 5
Col 6

6 columns × 2-span each = 12 total, with 5 gutters between them

How Gutters Affect Your Layout

Key Points:

  • • Gutters reduce content width - More gap = less space for content
  • • Gutters are between columns only - No gutters at container edges
  • • Gap applies to all sides - Creates consistent spacing
  • • Common sizes: gap-4 (16px) or gap-6 (24px)

Common Gap Classes:

  • • gap-0 = 0px (no spacing)
  • • gap-2 = 8px
  • • gap-4 = 16px (popular)
  • • gap-6 = 24px (popular)
  • • gap-8 = 32px

Quick Reference

Grid Classes

grid grid-cols-12 Setup 12-column grid
col-span-6 Half width (50%)
col-span-4 One third (33%)
col-span-3 One quarter (25%)

Flex Equivalents

flex gap-4 Setup flexbox
basis-1/2 Half width (50%)
basis-1/3 One third (33%)
basis-1/4 One quarter (25%)