---
title: "CSS Grid"
slug: "css-grid"
category: "glossary"
tags: ["glossary", "frontend", "css", "layout", "responsive-design", "grid"]
status: "stable"
last_updated: 2026-05-14
summary: "CSS Grid is a two-dimensional layout system placing items into rows and columns via explicit tracks or auto-fill rules, replacing float-based layouts."
related:
  [
    "[[frontend/css]]",
    "[[frontend/tailwind]]",
    "[[glossary/css-flexbox]]",
    "[[glossary/viewport]]",
    "[[frontend/html]]",
    "[[frontend/react]]",
  ]
---

## Overview

This page is the atomic definition. Full CSS layout guidance lives at [[frontend/css]].

## Definition

CSS Grid is a two-dimensional layout system that lets authors define rows and columns as explicit tracks (`grid-template-columns`, `grid-template-rows`) or auto-fill rules (`repeat(auto-fill, minmax(200px, 1fr))`). Items are placed into the resulting cells automatically or by specifying `grid-column` and `grid-row` spans. Grid is the right tool for page-level layouts and any design where rows and columns must align across both axes simultaneously. Flexbox handles one axis at a time; Grid handles both at once. Browser support for CSS Grid is universal as of 2017. Sub-grid (shipped in all major browsers in 2023) lets nested grids inherit the parent track definitions, which solves the alignment problem across card components.

## When it applies

Use Grid for two-dimensional layouts: application shells with sidebar, header, and content areas; card grids where row height must be consistent; and any layout where alignment along both axes matters. Use Flexbox for one-dimensional sequences (navigation bars, button groups, flex-wrap lines).

## Example

```css
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100dvh;
}
```

## Related concepts

- [[frontend/css]] - the full CSS layout and specificity guide.
- [[glossary/css-flexbox]] - the one-dimensional complement to Grid.
- [[glossary/viewport]] - Grid units like `dvh` and `svw` depend on the viewport.
- [[frontend/tailwind]] - Tailwind exposes Grid via `grid`, `grid-cols-*`, and `col-span-*` utilities.

## Citing this term

> See [[glossary/css-grid|CSS Grid]] (llmbestpractices.com/glossary/css-grid).

## Related

- [[frontend/css]]
- [[frontend/tailwind]]
- [[glossary/css-flexbox]]
- [[glossary/viewport]]
- [[frontend/html]]