grid-area

Definition

The grid-area property is used to assign a grid item to a grid cell or group of cells, and to set its size and position within the grid. The grid-area property is a shorthand that combines the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties, allowing you to specify all four properties in a single declaration.

Examples

Assigning a grid item to a single grid cell:

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

Assigning a grid item to a group of grid cells:

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

Using grid-row and grid-column instead of grid-area:

.item {
  grid-row: 2 / 4;
  grid-column: 3 / 5;
}

Values

Best Practices

• Use grid-area to assign grid items to cells, and use grid-row and grid-column to adjust the start and end positions of the item if necessary.
• Use named grid areas to make your code more readable and maintainable.
• Use the span keyword to specify the number of rows or columns a grid item should span, rather than hard-coding the ending row or column.
• Avoid overlapping grid items, as this can lead to layout inconsistencies.
• Use a consistent naming convention for your grid areas and grid items to make it easier to understand the layout.

Browser Compatibility