CSS Grid Areas

CSS Grid Areas

CSS Grid areas define rectangular regions within a grid. Areas can be created from grid lines or assigned names that make the structure of a layout easier to read and manage.

The grid-template-areas property describes the layout using named areas, while the grid-area property assigns individual grid items to those areas.

What is a Grid Area?

A grid area is a rectangular region of the grid bounded by four grid lines. It can contain one grid cell or span multiple rows and columns.

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

This item occupies a grid area that spans two column tracks and two row tracks.

Grid areas can be defined with line-based placement, but CSS Grid also provides named areas that can make a layout easier to understand.

Named Grid Areas

A grid area can be given a descriptive name such as header, sidebar, main, or footer.

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

These names can then be used by the grid container to describe where each region belongs.

Descriptive area names often make a complex Grid layout easier to read than a collection of numeric line references.

The grid-template-areas Property

The grid-template-areas property defines a visual map of named areas.

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

Each quoted string represents one row of the grid, and each name represents the area occupying a grid cell in that row.

Repeated names cause an area to span multiple cells. In this example, header and footer each span both columns.

The grid-area Property

The grid-area property assigns a grid item to a named area.

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

The area names must correspond to names used in the grid container's grid-template-areas declaration.

The same property can also be used as a shorthand for line-based placement.

.item {
  grid-area: 1 / 2 / 3 / 4;
}

With four line values, the order is row-start / column-start / row-end / column-end.

Creating a Page Layout

Named grid areas are especially useful for page layouts because the CSS can visually describe the arrangement of the major regions.

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 15px;
}
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

The first column is 220 pixels wide and contains the sidebar in the middle row. The second column is flexible and contains the main content.

The header and footer span both columns because their area names appear twice in their template rows.

Leaving Grid Cells Empty

A period can represent an unnamed cell that is not part of a named grid area.

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    ". footer";
}

The period leaves the first cell of the final template row outside any named area.

One or more periods can be used for an unnamed cell. Using a single period for each empty cell generally keeps the template easy to read.

Valid Grid Area Shapes

Each named grid area created with grid-template-areas must form a single rectangle.

.grid-container {
  grid-template-areas:
    "header header"
    "sidebar main"
    "sidebar main";
}

This is valid because each repeated area name forms one rectangular region.

A named area cannot form an L-shape or appear as separate disconnected regions.

/* Invalid */
.grid-container {
  grid-template-areas:
    "feature feature"
    "feature main"
    "footer feature";
}

The feature cells do not form one rectangle, so the declaration is invalid.

Grid Areas and Track Sizes

The grid-template-areas property describes which cells belong to each area, but it does not by itself specify the width of columns or height of rows.

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

The column and row sizes are defined separately with grid-template-columns and grid-template-rows.

This separation makes it possible to change track sizing without changing the names or basic arrangement of the areas.

Responsive Grid Areas

Named areas can make responsive layouts easier to reorganize because the area assignments can remain the same while the template changes.

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
@media (max-width: 700px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

On narrower screens, the layout changes from two columns to one column. The same named elements are simply assigned new positions through the template.

The HTML does not need to be rearranged to create this visual change.

Grid Areas vs Grid Lines

Named areas and line-based placement are two ways to describe where grid items belong.

Both approaches can be used in the same Grid layout when appropriate. The best choice depends on whether descriptive regions or direct line placement makes the layout clearer.

CSS Grid Areas Example

The following example creates a familiar page layout with header, navigation, main content, sidebar, and footer areas.

.page {
  display: grid;
  grid-template-columns: 1fr 240px;
  grid-template-areas:
    "header header"
    "nav nav"
    "main sidebar"
    "footer footer";
  gap: 10px;
}

Open the example in the editor and rearrange the names in grid-template-areas to see how the page regions move without changing the HTML source order.