CSS Grid Guide

CSS Grid Complete Guide

Master CSS Grid layout with this comprehensive visual guide. Includes practical examples and common patterns for building modern, responsive interfaces.

10
Sections
20+
Code Examples
10+
Layout Patterns
4
Difficulty Levels

Grid Basics

Enable CSS Grid and define basic tracks

Beginner
2 examples

Creating a Grid Container CSS

Turn a block element into a grid and define basic columns 

<!-- HTML -->
<div class='grid-container'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

/* CSS */
.grid-container {
  display: grid;                 /* enable grid layout */
  grid-template-columns: 1fr 1fr;/* 2 equal-width columns */
  grid-template-rows: auto;
  gap: 1rem;                     /* shorthand for row-gap + column-gap */
}

Explicit vs Implicit Grid CSS

Define explicit tracks and control auto-created rows 

/* Explicit 3-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px; /* size for implicit rows */
  gap: 0.75rem;
}

.grid > div {
  background: #e5e7eb;
  padding: 0.5rem;
  border-radius: 0.5rem;
  text-align: center;
}

Track Sizing & Gaps

Control column/row sizes with fr, minmax, and gaps

Beginner
2 examples

Fractional Units (fr) CSS

Use fr to divide available space between tracks 

/* 3 columns: 50%, 25%, 25% of free space */
.grid-fr {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

/* Fixed sidebar + flexible content */
.grid-fixed {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
}

minmax(), auto-fit & auto-fill CSS

Create flexible, wrapping grids that adapt to viewport width 

/* Fluid card grid: min 200px each, grow to fill row */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

/* Implicit rows with minimum height */
.rows {
  display: grid;
  grid-auto-rows: minmax(120px, auto);
  row-gap: 1rem;
}

Item Placement

Place items with line numbers and spans

Intermediate
2 examples

Placing Items by Line Numbers CSS

Position items using grid-column and grid-row 

<!-- HTML -->
<div class='grid'>
  <header class='header'>Header</header>
  <aside class='sidebar'>Sidebar</aside>
  <main class='main'>Main</main>
</div>

/* CSS */
.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr;
  gap: 1rem;
}

.header {
  grid-column: 1 / -1; /* span all columns */
}

.sidebar {
  grid-column: 1 / 2;  /* first column */
  grid-row: 2 / 3;
}

.main {
  grid-column: 2 / 3;  /* second column */
  grid-row: 2 / 3;
}

Spanning Tracks with span CSS

Make items span multiple rows or columns 

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 120px;
  gap: 1rem;
}

.item-wide {
  grid-column: span 2; /* span 2 columns */
}

.item-tall {
  grid-row: span 2;    /* span 2 rows */
}

Named Areas & Lines

Name grid lines and areas for readable layouts

Intermediate
2 examples

Named Grid Lines CSS

Give lines semantic names to place items more clearly 

.layout {
  display: grid;
  grid-template-columns:
    [sidebar-start] 240px
    [content-start] minmax(0, 1fr)
    [content-end];
  gap: 1.5rem;
}

.sidebar {
  grid-column: sidebar-start / content-start;
}

.content {
  grid-column: content-start / content-end;
}

Grid Template Areas Layout CSS

Build page layouts with named areas 

<!-- HTML -->
<div class='page'>
  <header class='header'>Header</header>
  <aside class='sidebar'>Sidebar</aside>
  <main class='main'>Main</main>
  <footer class='footer'>Footer</footer>
</div>

/* CSS */
.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header  header'
    'sidebar main'
    'footer  footer';
  min-height: 100vh;
  gap: 1rem;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Auto-placement & Flow

Let the browser place items automatically

Intermediate
2 examples

grid-auto-flow CSS

Control how items are automatically placed 

.grid-row {
  display: grid;
  grid-auto-flow: row;      /* default: fill rows left-to-right */
  grid-auto-rows: 150px;
  gap: 1rem;
}

.grid-column {
  display: grid;
  grid-auto-flow: column;   /* fill columns top-to-bottom */
  grid-auto-columns: 200px;
  gap: 1rem;
}

.grid-dense {
  display: grid;
  grid-auto-flow: row dense;/* backfill gaps if items fit */
  grid-auto-rows: 120px;
  gap: 0.75rem;
}

Implicit Tracks CSS

Size tracks that are created implicitly 

.timeline {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(80px, auto);
  row-gap: 1rem;
}

.timeline-item {
  background: #eff6ff;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

Alignment & Justification

Align items inside tracks and the whole grid

Intermediate
2 examples

Aligning Items in Cells CSS

Use justify-items, align-items and self-* on children 

.grid {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-auto-rows: 150px;
  justify-items: center; /* horizontal inside cells */
  align-items: center;   /* vertical inside cells */
  gap: 1rem;
}

.featured {
  justify-self: stretch;
  align-self: start;
}

/* Shorthand for centering content in cells */
.grid-centered {
  display: grid;
  place-items: center;   /* align-items + justify-items */
}

Aligning the Whole Grid CSS

Distribute tracks within the container 

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-auto-rows: 120px;
  gap: 1rem;

  justify-content: center; /* horizontally align the grid */
  align-content: start;    /* vertically align the grid */
}

/* Shorthand for centering the grid itself */
.wrapper-centered {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  place-content: center;   /* align-content + justify-content */
}

Responsive Grids

Build flexible, responsive grid layouts

Advanced
2 examples

Auto-fit Responsive Cards CSS

Create a wrapping card grid with repeat(auto-fit, minmax()) 

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.card {
  background: #111827;
  color: white;
  padding: 1.25rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
}

Changing Grid with Media Queries CSS

Swap between stacked and multi-column layouts 

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Tablet: sidebar + content */
@media (min-width: 768px) {
  .layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

/* Desktop: sidebar + content + right rail */
@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 260px minmax(0, 1fr) 260px;
  }
}

Layout Patterns

Common page and component layouts with Grid

Advanced
2 examples

Holy Grail Layout CSS

Header, footer, sidebar, and main content layout 

<!-- HTML -->
<div class='holy-grail'>
  <header class='header'>Header</header>
  <nav class='nav'>Nav</nav>
  <main class='content'>Content</main>
  <aside class='aside'>Aside</aside>
  <footer class='footer'>Footer</footer>
</div>

/* CSS */
.holy-grail {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header header  header'
    'nav    content aside'
    'footer footer  footer';
  min-height: 100vh;
}

.header  { grid-area: header; }
.nav     { grid-area: nav; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

Centered Card / Modal CSS

Perfectly center a card in the viewport with Grid 

<!-- HTML -->
<div class='page'>
  <div class='modal'>Centered box</div>
</div>

/* CSS */
.page {
  display: grid;
  min-height: 100vh;
  place-items: center; /* center horizontally & vertically */
  background: #f9fafb;
}

.modal {
  background: white;
  padding: 2rem;
  border-radius: 0.75rem;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15);
}

Grid Functions & Units

Use powerful functions and custom properties

Intermediate
2 examples

repeat(), minmax(), fit-content() CSS

Common utility functions for flexible tracks 

.grid-repeat {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-minmax {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.grid-fit {
  display: grid;
  grid-template-columns: fit-content(300px) 1fr;
  gap: 1rem;
}

CSS Custom Properties with Grid CSS

Control grid gaps and track sizes with variables 

:root {
  --grid-gap: 1.25rem;
  --sidebar-width: 260px;
}

.layout {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.layout-wide {
  --sidebar-width: 320px; /* override per instance */
}

Performance & Best Practices

Tips for maintainable and robust Grid layouts

Expert
2 examples

Grid Debugging Helper CSS

Outline grid items during development to see structure 

/* Add this class to any grid container while debugging */
.grid-debug > * {
  outline: 1px dashed rgba(37, 99, 235, 0.7);
}

/* Optional: lightly tint key areas */
.header  { background: rgba(59, 130, 246, 0.08); }
.sidebar { background: rgba(16, 185, 129, 0.08); }
.main    { background: rgba(249, 115, 22, 0.08); }

Graceful Fallback for Older Browsers CSS

Use @supports to progressively enhance with Grid 

.cards {
  /* Fallback: simple flexbox layout */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.cards > * {
  flex: 1 1 220px;
}

/* Modern browsers: upgrade to Grid */
@supports (display: grid) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

CSS Grid Best Practices & Tips

Essential guidelines for building flexible, maintainable grid layouts

Layout Strategy

  • Design mobile-first, enhance with more columns at larger breakpoints
  • Use grid-template-areas for complex page layouts
  • Prefer fr units over percentages for track sizing

Responsive Design

  • Use repeat(auto-fit, minmax()) for fluid card grids
  • Avoid fixed heights; use minmax() with auto rows
  • Combine Grid with media queries for breakpoint changes

Maintainability

  • Name lines and areas semantically (header, sidebar, main)
  • Keep complex grids in dedicated components or partials
  • Comment or diagram non-trivial grid templates
Buy Me A Coffee