Grid System

Build responsive layouts with flexible CSS Grid. Mobile-first approach with automatic responsive columns and proper spacing.

Quick Navigation

• Typography System – Font scales, sizes, and weights
• Spacing & Rhythm – Vertical rhythm and spacing utilities
• Prose System – Readable article layouts
• Colors – Text and background colors
• Utilities – Helper classes for common patterns

Basic Grid

Simple Grid (default 12 columns)

<div class=“grid“>
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Grid with Columns

3 equal columns:

4 equal columns:

Responsive Columns

Change number of columns at different breakpoints:

Mobile: 1 column | Tablet: 2 columns | Desktop: 3 columns

<div class=“sm:grid-1 grid-2 lg:grid-3“>
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Breakpoint Prefixes

Column Spanning

Make items span multiple columns:

2-column main content + 1-column sidebar layout:

<!– Main content spans 2 columns, sidebar 1 column –>
<div class=“grid-sidebar“>
  <article>
    <h1>Main Content</h1>
  </article>
  <aside>
    <h3>Sidebar</h3>
  </aside>
</div>

Responsive Spanning

Mobile: Full width | Desktop: 2-column content + sidebar:

<!– Mobile: spans full width (1 col) Desktop: main spans 2 of 3, sidebar spans 1 –>
<div class=“grid-sidebar“>
  <article class=“sm:col-row“>
    Main content
  </article>
  <aside class=“sm:col-row“>
    Sidebar
  </aside>
</div>

<!– On large screens, use: –>

Common Layouts

Single Column (Full Width)

Full-width layout:

<div class=“grid“>
  <article>
    <h1>Full Width Article</h1>
    <p>Content spans the full width</p>
  </article>
</div>

Two Column

Equal columns:

2:1 ratio (wider left):

<!– Equal columns –>
<div class=“grid“>
  <div>Column 1</div>
  <div>Column 2</div>
</div>

<!– 2:1 ratio (wider left) –>
<div class=“grid“>
  <div>Wide column</div>
  <div>Narrow column</div>
</div>

Three Column

Three equal columns:

With sidebar layout:

<!– Three equal columns –>
<div class=“grid-3“>
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

<!– Or with sidebar layout –>
<div class=“grid-sidebar“>
  <article>Wide main content</article>
  <aside>Sidebar</aside>
</div>

Card Grid

Responsive card layout (hover effect visualization):

<!– Responsive card grid –>
<div class=“grid-3“>
  <div class=“card“>
    <h3>Card 1</h3>
    <p>Card content</p>
  </div>
  <div class=“card“>
    <h3>Card 2</h3>
    <p>Card content</p>
  </div>
  <div class=“card“>
    <h3>Card 3</h3>
    <p>Card content</p>
  </div>
</div>

Gap (Spacing Between Items)

Control space between grid items:

Small gap (0.5rem):

Medium gap (1rem):

Large gap (2rem):

<!– Small gap –>
<div class=“grid“>
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!– Medium gap –>
<div class=“grid“>
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!– Large gap –>
<div class=“grid“>
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Responsive Gap

Small gap on mobile (0.5rem), larger gap on larger screens (1.5rem):

<!– Small gap mobile, larger gap on desktop –>
<div class=“grid“>
  <!– On larger screens, change gap to: gap: 1.5rem; –>
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Row Span

Make items span multiple rows (less common):

<div class=“grid grid-cols-3 auto-rows-max gap-4“>
  <div class=“row-span-2“>Tall item</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Alignment

Horizontal Alignment

Items start at left:

Items end at right:

Items centered:

Items spaced evenly:

<!– Items start at left –>
<div class=“grid“ style=“justify-items: start;“>
  <div>Item</div>
  <div>Item</div>
</div>

<!– Items end at right –>
<div class=“grid“ style=“justify-items: end;“>
  <div>Item</div>
  <div>Item</div>
</div>

<!– Items centered –>
<div class=“grid“ style=“justify-items: center;“>
  <div>Item</div>
  <div>Item</div>
</div>

<!– Items spaced evenly –>
<div class=“grid“>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Vertical Alignment

Items align to top:

Items align to center:

Items align to bottom:

<!– Items align to top –>
<div class=“grid“ style=“align-items: start;“>
  <div>Top</div>
  <div>Top</div>
  <div>Top</div>
</div>

<!– Items align to center –>
<div class=“grid“ style=“align-items: center;“>
  <div>Center</div>
  <div>Center</div>
  <div>Center</div>
</div>

<!– Items align to bottom –>
<div class=“grid“ style=“align-items: end;“>
  <div>Bottom</div>
  <div>Bottom</div>
  <div>Bottom</div>
</div>

Real-World Examples

Blog Layout

Main content (3 columns) + Sidebar (1 column):

<div class=“grid“>
  <!– Main content spans 3 columns –>
  <main style=“grid-column: span 3;“>
    <article>
      <h1>Blog Post Title</h1>
      <p>Post content goes here...</p>
    </article>
  </main>

  <!– Sidebar 1 column –>
  <aside>
    <h3>Recent Posts</h3>
    <ul>
      <li><a href=“#“>Post 1</a></li>
      <li><a href=“#“>Post 2</a></li>
    </ul>
  </aside>
</div>

Portfolio Grid

Featured project spans full width, regular items below:

<div class=“grid“>
  <!– Featured project spans full width –>
  <div style=“grid-column: span 3;“>
    <img src=“/hero-project.jpg“ alt=“Featured Project“>
    <h2>Featured Project</h2>
  </div>

  <!– Regular portfolio items –>
  <div class=“card“>
    <img src=“/project-1.jpg“ alt=“Project 1“>
    <h3>Project 1</h3>
  </div>
  <div class=“card“>
    <img src=“/project-2.jpg“ alt=“Project 2“>
    <h3>Project 2</h3>
  </div>
  <div class=“card“>
    <img src=“/project-3.jpg“ alt=“Project 3“>
    <h3>Project 3</h3>
  </div>
</div>

Dashboard

Large stat card (2 columns) + smaller stat cards (1 column each):

<div class=“grid“>
  <!– Large stat card spans 2 columns –>
  <div>
    <div class=“card“>
      <h3>Total Users</h3>
      <p class=“text-3xl“>1,234</p>
    </div>
  </div>

  <!– Regular stat cards –>
  <div class=“card“>
    <h3>Active</h3>
    <p class=“text-2xl“>567</p>
  </div>
  <div class=“card“>
    <h3>Inactive</h3>
    <p class=“text-2xl“>667</p>
  </div>
</div>

CSS Grid vs Flexbox

Use Grid For:

• Page layouts
• Two-dimensional layouts
• Complex layouts with rows and columns
• Spanning items across multiple cells

Use Flexbox For:

• One-dimensional layouts
• Navigation menus
• Button groups
• Quick alignment

Auto-fill and Auto-fit

Create responsive grids without media queries:

<!– Responsive without breakpoints –>
<div>
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
  <!– More cards automatically wrap –>
</div>

See Also

• API Reference – Complete grid documentation
• Spacing & Rhythm – Grid gap and spacing
• Components – Components within grids
• Typography – Text within grid items

Master layout design with grids. Learn spacing and rhythm