CSS Grid Layout: A Complete Guide

Build responsive layouts with CSS Grid—tracks, placement, and common page patterns—using MDN as the source of truth.

What you will learn

Create a grid container and define tracks
Place items with lines and named areas
Build responsive card layouts with minmax and auto-fit
Align content and know when Flexbox is still the better tool

Prerequisites

HTML basics
CSS selectors, box model, and media queries

Mental model

Grid is two-dimensional: you control rows and columns together. Flexbox is usually one-dimensional (a row or a column). Use Grid for page structure and card galleries; use Flexbox for toolbars, nav links, and centering inside a cell.

Official overview: MDN CSS Grid Layout.

Basic grid

<div class="grid">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

1fr means “one share of free space.” gap spaces tracks without margin hacks.

Named areas (app shell)

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  min-height: 100vh;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }

@media (max-width: 720px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }
}

Docs: grid-template-areas.

Responsive auto-fit cards

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

Cards grow to fill the row; when space runs out, they wrap to a new row. Prefer auto-fit for fluid galleries; use explicit breakpoints when the design needs a hard layout change.

Placement and alignment

.hero {
  display: grid;
  place-items: center;
  min-height: 40vh;
}
.sidebar-item {
  grid-column: 1 / -1; /* full width */
}

justify-items / align-items: align content inside cells
justify-content / align-content: align the whole grid when it is smaller than its container
Line numbers start at 1; negative lines count from the end

Practice checklist

Rebuild a header / sidebar / main / footer shell
Convert a three-column desktop layout to a single column under 720px
Ship a card gallery with auto-fit + minmax
Inspect the grid with browser DevTools (Grid overlay)

Common pitfalls

Nesting grids without resetting display on the child that should be a new grid
Using fixed px columns only, then fighting overflow on mobile
Mixing Grid and float layouts in the same region

Sources and further reading

Who this guide is for

Frontend developers learning two-dimensional layout
Design-system engineers building reusable page patterns
Teams fixing fragile responsive CSS

Definition of done

A responsive Grid layout with semantic source order, named structure, content-safe tracks, keyboard-friendly behavior, and visual tests at narrow, medium, and wide widths.

Finishing the commands is not the same as finishing the guide. Keep the result only when another person can reproduce it, inspect the evidence, and understand the remaining risks.

Professional workflow

Phase 1 — Start from content and reading order

Goal: Preserve meaning before visual placement.

Write semantic HTML in the correct reading order.
Identify fixed, flexible, and content-sized regions.
Choose the smallest breakpoint set supported by content pressure.

Verification: Disabling CSS leaves a logical and usable document.

Phase 2 — Create resilient tracks

Goal: Let content grow without overflow or magic dimensions.

Use minmax and fractional tracks deliberately.
Name areas or lines where that improves reviewability.
Test long labels, translated text, empty regions, and large zoom.

Verification: No horizontal overflow appears at 320px width or 200% zoom.

Phase 3 — Validate interaction and stability

Goal: Ensure visual reordering does not damage usability.

Compare visual and keyboard focus order.
Reserve space for media to reduce layout shift.
Capture representative viewport tests.

Verification: Focus moves in the same logical order users see and expect.

Review questions before you continue

Is Grid necessary, or would one-dimensional Flexbox be clearer?
What is the minimum usable width of each region?
Does visual placement differ from DOM order?
Which content variation is most likely to break the tracks?

If an answer is unknown, record it as an explicit follow-up instead of hiding the uncertainty behind a successful demo.

Troubleshooting decision guide

A grid child overflows: check intrinsic minimum size and use minmax(0, 1fr) where appropriate.
Items do not align as expected: distinguish track alignment from item alignment.
Auto-placement creates gaps: inspect explicit spans and dense packing assumptions.
Mobile layout feels reordered: simplify tracks while preserving DOM order.

Change one variable at a time, preserve the first useful error, and write down the command or condition that fixed it. That turns a private debugging session into team knowledge.

Production-readiness checklist

Test real content, localization, zoom, and dynamic font sizes.
Keep focus order aligned with source order.
Use container queries only when the component boundary justifies them.
Avoid fixed heights for text-heavy regions.
Add visual regression coverage for the layout states that matter.

These checks are intentionally stricter than a beginner demo. Use them to decide whether to continue learning, run a controlled pilot, or request specialist review.

Your next 30 minutes

Replace placeholder copy with the longest realistic content.
Test 320px, 768px, and a wide desktop viewport.
Navigate every interactive element by keyboard.
Save the pattern as a documented component only after these checks pass.

CTA: Pick the first unchecked step, complete it now, and save the evidence in your project README or decision log. Then open the official documentation linked below before adopting the result in production.