---
title: "Grid Template"
slug: "grid-template"
category: "glossary"
tags: ["glossary", "css", "grid", "grid-template", "layout", "frontend"]
status: "stable"
last_updated: 2026-08-14
summary: "The grid-template shorthand defines named areas, row sizes, and column sizes for a CSS grid container in a single declaration."
related:
  [
    "[[glossary/css-grid]]",
    "[[glossary/flex-direction]]",
    "[[glossary/container-query]]",
    "[[glossary/layout-shift]]",
    "[[frontend/css]]",
  ]
---

## Overview

This page is the atomic definition. Full CSS layout guidance lives at [[frontend/css]]. `grid-template` is the shorthand that defines a grid container's row sizes, column sizes, and named areas in one declaration, most readable in its named-areas form.

## Definition

`grid-template` is a shorthand that combines `grid-template-rows`, `grid-template-columns`, and `grid-template-areas` into one declaration. The named-areas form is the most readable:

```css
grid-template:
  "header header" 60px
  "sidebar main"  1fr
  "footer footer" 40px
  / 200px 1fr;
```

Each quoted string is one row; whitespace separates cell names; identical names spanning adjacent cells merge into one area. The slash separates row sizes from column sizes. A `.` in a quoted string marks an unnamed cell.

Individual properties:
- `grid-template-columns`: defines column track sizes (`fr`, `px`, `%`, `auto`, `min-content`, `max-content`, `minmax()`).
- `grid-template-rows`: defines row track sizes.
- `grid-template-areas`: names cells for use with `grid-area` on children.

The `fr` unit distributes remaining space after fixed and intrinsic tracks are sized. `repeat(auto-fill, minmax(200px, 1fr))` creates a responsive multi-column grid without media queries.

## When it applies

Use `grid-template` for two-dimensional layouts: page shells, card grids, dashboards. Use [[glossary/flex-direction|flexbox]] for one-dimensional component interiors (toolbars, stacks). Grid is the better choice when both row alignment and column alignment matter simultaneously.

Avoid the shorthand when only columns need explicit sizing; `grid-template-columns` alone is clearer and less error-prone.

## Example

```css
.page {
  display: grid;
  grid-template:
    "nav  nav"    50px
    "side body"   1fr
    "foot foot"   40px
    / 240px 1fr;
  min-height: 100vh;
}

.nav  { grid-area: nav; }
.side { grid-area: side; }
.body { grid-area: body; }
.foot { grid-area: foot; }
```

## Related concepts

- [[glossary/css-grid]] - the full grid model including implicit tracks and alignment.
- [[glossary/flex-direction]] - flex is the sibling layout model for one-dimensional flows.
- [[glossary/container-query]] - container queries let grid layouts adapt to parent size, not just viewport.
- [[glossary/layout-shift]] - grid tracks that change size after paint cause CLS.
- [[frontend/css]] - the CSS deep-dive.

## Citing this term

> See [[glossary/grid-template|Grid Template]] (llmbestpractices.com/glossary/grid-template).

## Related

- [[glossary/css-grid]]
- [[glossary/flex-direction]]
- [[glossary/container-query]]
- [[glossary/layout-shift]]
- [[frontend/css]]