CSS Grid Layout

What You’ll Learn

CSS Grid lets you build two-dimensional layouts with rows and columns. Define a grid container, place items in cells, and create responsive page layouts without floats or positioning hacks.

Introduction

The CSS Grid Layout Module is a powerful system for creating web layouts with rows and columns. Unlike Flexbox, which handles one dimension at a time, Grid controls both dimensions simultaneously.

What Is CSS Grid?

CSS Grid divides a container into tracks (rows and columns) and places child elements into cells. You get precise control over placement, spanning, gaps, and responsive reflow.

Grid is ideal for page layouts (header, sidebar, main, footer), photo galleries, dashboards, and card grids that need to adapt to screen size.

Basic Concepts

• Grid container — Parent with display: grid.
• Grid item — Direct child placed on the grid.
• Grid tracks — Rows and columns that form the grid.
• Grid lines — Dividing lines between tracks (numbered from 1).
• Grid area — Named rectangular region spanning multiple cells.

📝 Syntax

Define a basic three-column grid with equal-width tracks:

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

Name layout regions with grid-template-areas:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }

Key Container Properties

Key Item Properties

When to Use CSS Grid

• Page layouts — Header, sidebar, main content, and footer in one grid.
• Card galleries — Responsive rows of cards with auto-fit.
• Dashboards — Widgets placed in specific rows and columns.
• Overlapping elements — Items can share the same cell area when needed.
• Equal-height columns — Grid tracks naturally align row heights.

Use Flexbox for one-dimensional flows like navbars. Use Grid when you need both rows and columns. They work great together on the same page.

Examples Gallery

Practice CSS Grid with basic columns, page layouts, column spanning, and responsive auto-fit grids.

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

.layout {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 0.5rem;
}

.header { grid-area: header; }

.wide {
  grid-column: span 2;
}

.full {
  grid-column: 1 / -1;
}

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

💬 Usage Tips

• Start simple — Three equal columns teach the basics before complex areas.
• Use fr for flexibility — Prefer 1fr over percentages for equal columns.
• gap over margins — gap handles spacing between all cells cleanly.
• DevTools overlay — Firefox and Chrome show grid lines for debugging.
• Combine with Flexbox — Grid for page structure; Flexbox inside components.

⚠️ Common Pitfalls

• Only direct children — Grid applies to immediate children only.
• Overlapping items — Poorly placed spans can cause items to overlap.
• Over-complexity — Start simple; add areas and spans as needed.
• Using Grid for navbars — Flexbox is often simpler for one-row navigation.
• Forgetting minmax minimum — Too-small min values can squash content on mobile.

♿ Accessibility

• Source order — Visual grid placement should not break logical DOM order for screen readers.
• Semantic HTML — Use <header>, <nav>, <main>, <footer> in grid layouts.
• Reading order — Avoid rearranging content in ways that confuse assistive technology.
• Responsive reflow — auto-fit helps content remain readable without horizontal scroll.
• Focus visibility — Grid items still need visible focus styles for keyboard users.

💡 Best Practices