How to Use grid-area in CSS: Syntax and Examples

The grid-area property in CSS lets you assign a name to a grid item or specify its position in the grid by defining the start and end lines for rows and columns. You can use it to place items precisely in a grid container by either naming the area or using line numbers.

Syntax

The grid-area property can be used in two main ways:

• As a shorthand for positioning: grid-area: row-start / column-start / row-end / column-end; defines where the item starts and ends in the grid.
• As a name assignment: grid-area: <name>; assigns the item to a named grid area defined in grid-template-areas.

css

/* Shorthand positioning syntax */
grid-area: 1 / 2 / 3 / 4;

/* Naming syntax */
grid-area: header;

Example

This example shows how to use grid-area to place items by line numbers and by named areas in a grid container.

css

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    "header header header header"
    "sidebar content content content"
    "footer footer footer footer";
  gap: 10px;
  height: 320px;
  padding: 10px;
  background: #f0f0f0;
}
.header {
  grid-area: header;
  background: #4CAF50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.sidebar {
  grid-area: sidebar;
  background: #2196F3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.content {
  /* Using line numbers: row-start / column-start / row-end / column-end */
  grid-area: 2 / 2 / 3 / 5;
  background: #ff5722;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.footer {
  grid-area: footer;
  background: #9c27b0;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

Output

A rectangular grid with four columns and three rows: The top row is a green header spanning all columns, the left column in the second row is a blue sidebar, the orange content area spans the remaining columns in the second row, and the purple footer spans the entire bottom row.

Common Pitfalls

Common mistakes when using grid-area include:

• Using line numbers that are out of range of the grid lines, causing the item not to appear.
• Assigning a grid-area name to an item without defining that name in grid-template-areas.
• Mixing shorthand line positioning and named areas incorrectly on the same item.

css

/* Wrong: line numbers out of range */
.item {
  grid-area: 5 / 1 / 6 / 3; /* grid only has 4 columns and 3 rows */
}

/* Right: valid line numbers */
.item {
  grid-area: 2 / 1 / 3 / 3;
}

/* Wrong: named area not defined */
.item {
  grid-area: unknown-area;
}

/* Right: named area defined in container */
.container {
  grid-template-areas: "header header" "content content";
}
.item {
  grid-area: content;
}

Quick Reference

Property	Description	Example
grid-area (shorthand)	Sets start/end lines for row and column	grid-area: 1 / 2 / 3 / 4;
grid-area (name)	Assigns item to named grid area	grid-area: sidebar;
grid-template-areas	Defines named areas in grid container	grid-template-areas: "header header" "sidebar content";
grid-row-start	Start line for row	grid-row-start: 1;
grid-column-end	End line for column	grid-column-end: 3;

Key Takeaways

Use grid-area to place grid items by line numbers or named areas.

Named areas require matching names in grid-template-areas on the container.

Line numbers must be within the grid's defined rows and columns.

Avoid mixing named areas and line numbers on the same grid item.

Use grid-area shorthand for concise placement of grid items.