grid-template-areas

Definition

The grid-template-areas property defines named grid areas for an implicit grid. The named grid areas are defined as a series of strings that represent rows in the grid. Each string defines the cells in that row, and cells with the same name are considered to be part of the same grid area.

Examples

Define a grid with three rows and three columns, with named areas:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "sidebar footer footer";
}

Define a grid with two rows and two columns, with a named area spanning both rows:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas: 
    "header header"
    "content content"
    "footer footer";
}

.grid-item {
  grid-area: content;
}

Define a grid with an explicit grid and named areas for the first two rows:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: [header-start] 100px [header-end content-start] 1fr [content-end footer-start] 100px [footer-end];
  grid-template-areas:
    "header header"
    "sidebar main"
    "sidebar footer";
}

Values

Best Practices

• Define a named grid area for each row in the grid to ensure consistency and make the layout easier to understand.
• Use the . character to represent an empty cell within a named grid area.
• Use descriptive names for grid areas to make the code easier to understand and maintain.
• Avoid overlapping named grid areas, as this can cause unexpected layout behavior.
• Remember that grid-template-areas only applies to the implicit grid, not the explicit grid.

Browser Compatibility