grid-area

grid-area sets a grid item’s row start, column start, row end, and column end. It also provides the convenient one-name form used with grid-template-areas. The surrounding container needs display:grid.

Assign an item to a named area

The template declares a heading across both columns and a note beside the explanation. Grid-area connects each item to its named rectangle.

<section class="layout">
  <h2 class="heading">Workshop notes</h2>
  <p class="note">Bring a notebook.</p>
  <p class="explanation">Start with the smallest working example.</p>
</section>

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-areas: "heading heading" "note explanation";
  gap: 0.5rem;
}
.heading {
  grid-area: heading;
}
.note {
  grid-area: note;
}
.explanation {
  grid-area: explanation;
}
.layout > * {
  margin: 0;
  padding: 0.75rem;
  background: #dbeafe;
}

Place a notice across a row

The four-value order is row-start / column-start / row-end / column-end. This notice starts at row 2, column 1, and ends at row 3, column 4: one row across three tracks.

<div class="layout">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <p class="notice">All three columns in row two</p>
</div>

.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.notice {
  grid-area: 2 / 1 / 3 / 4;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
}

Values, defaults, and resets

All four longhands initially use auto and are not inherited. Nonzero line numbers, names, auto, and positive spans follow the placement rules. The shorthand sets every constituent, including omitted values. It is not ordered like margin’s clockwise four sides.

A single custom name propagates to the missing boundaries and matches the generated start/end lines of its area. With a single numeric row start, the other boundaries become auto. Negative line numbers count back from the explicit grid’s end.

Common mistakes

A named area must exist as a valid rectangle in grid-template-areas; the name does not create a landmark or other HTML meaning. Items can overlap if assigned the same area. That can be deliberate, but essential text and focus indicators must remain visible.

Placement does not change DOM reading or keyboard order. Choose logical HTML first. Learn grid-row, grid-column, and z-index for individual axes and deliberate overlap.

Sources and browser support

MDN: grid-area documents the shorthand and compatibility. The Grid placement specification defines omitted-value and line-matching rules.