grid-area

grid-area is a shorthand that places a grid item by setting all four line-based properties — grid-row-start, grid-column-start, grid-row-end, and grid-column-end — in a single declaration. It also does double duty as the way you assign an item to a named region from grid-template-areas, which is usually the more readable way to use it.

The Numeric-Line Shorthand

With numeric grid lines, grid-area takes up to four values in the order row-start / column-start / row-end / column-end, separated by slashes:

CSS

.item {
  /* row-start / column-start / row-end / column-end */
  grid-area: 1 / 1 / 3 / 3;
}

/* equivalent to writing all four longhands: */
.item {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}

Fewer than four values are allowed — missing end values are inferred as span 1 from the corresponding start.
grid-area: 2 / 1 sets row-start: 2 and column-start: 1, leaving both ends to default.
Counting numeric lines on a large grid gets error-prone fast — this is where named areas earn their keep.

Named Areas: The Cleaner Alternative

Recap: grid-template-areas lets you draw your layout as an ASCII map of named regions on the grid container. Once a container defines named areas, placing an item into one of them is as simple as giving that item a matching grid-area name — no line numbers required at all.

CSS

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  gap: 16px;
  min-height: 100vh;
}

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

HTML

<div class="page">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main">Main content</main>
  <footer class="footer">Footer</footer>
</div>

Compare the readability: with named areas, .main { grid-area: main; } tells you exactly what's happening at a glance. The numeric equivalent, .main { grid-area: 2 / 2 / 3 / 3; }, requires you to mentally re-trace the whole grid definition to understand what that maps to — and it silently breaks if you insert a row or column later without updating every number.

grid-area can create a named line too

Naming an area with `grid-template-areas` automatically generates matching line names — a `header` area implicitly creates lines named `header-start` and `header-end` that you can reference from `grid-column`/`grid-row` on other items, even ones not assigned to that named area.

Rules for Named Areas

Every row in the grid-template-areas string must have the same number of cell names — the strings define a strict grid shape.
A named area must form a single rectangle. Non-rectangular shapes (an L-shape, for example) are invalid.
Use a period (.) to leave a cell intentionally empty without assigning it to any area.

CSS

.page {
  grid-template-areas:
    "header header"
    "sidebar main"
    ".      footer"; /* bottom-left cell is deliberately empty */
}

Give your grid lines names too: [Named Grid Lines](/css/named-grid-lines).