CSS grid-area Property

Definition and Usage

The grid-area property is a shorthand that places a grid item by setting its edges: grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

You can assign a named area from grid-template-areas, or use line numbers and span. The property is not inherited. The initial value for each longhand is auto (auto-placement, span of 1).

CSS Syntax

Four values mean row-start / column-start / row-end / column-end. One name means a named area.

Property Values

If you omit later values, missing ends often become auto, or copy a named start when that start is a custom ident.

How to Use grid-area

Build a grid container, then place each item with a name or with lines.

1. Set display: grid on the container.
2. For named placement, define areas with grid-template-areas.
3. On the item, set grid-area to the area name, or to line values.
4. Use longhands such as grid-row or grid-column when you only need one axis.

Live Preview

A layout with named areas a, b, and c. Only the highlighted item’s grid-area changes.

CSS Examples

Each snippet focuses on grid-area. Use Try It Yourself for a live editor.

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "main side";
  }

  .box {
    grid-area: header;
  }
</style>

<section>
  <div class="box">Header</div>
  <div>Main</div>
  <div>Side</div>
</section>

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 60px 60px 60px;
  }

  .box {
    grid-area: 1 / 1 / 2 / 4;
  }
</style>

<section>
  <div class="box">Wide</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 60px 60px;
  }

  .box {
    grid-area: 1 / 1 / span 2 / span 2;
  }
</style>

<section>
  <div class="box">Span</div>
  <div>2</div>
  <div>3</div>
</section>

Key Takeaways