CSS grid-area Property

What You’ll Learn

The grid-area property places a grid item by line numbers or assigns it to a named region in your layout.

Introduction

The grid-area property in CSS is used to define a grid item's size and location within a grid layout. It is a shorthand property that can combine grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

This property provides an efficient way to place and size grid items, making it easier to design complex grid layouts.

Definition and Usage

Apply grid-area on a child of a grid container (an element with display: grid). Use line numbers when you need precise control over which cells an item covers. Use a name like grid-area: header when the parent defines regions with grid-template-areas.

📝 Syntax

The syntax for the grid-area property can take two forms: the shorthand form or using grid line names.

Shorthand Syntax

element {
  grid-area: row-start / column-start / row-end / column-end;
}

• row-start — The line where the item's row starts.
• column-start — The line where the item's column starts.
• row-end — The line where the item's row ends.
• column-end — The line where the item's column ends.

Line Names Syntax

element {
  grid-area: grid-area-name;
}

grid-area-name is the name of the grid area defined by the grid-template-areas property on the container.

Default Value

The default value for grid-area is auto / auto / auto / auto, which means the grid item will be placed in the next available cell according to the grid's flow.

Syntax Rules

• Applies to grid items (children of a grid container), not the container itself.
• Slash-separated values follow the order: row-start / column-start / row-end / column-end.
• Omitted values default to auto.
• A single name must match a region in the parent's grid-template-areas.
• Shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

💎 Property Values

Examples Gallery

Place an item spanning a 2×2 area with line numbers, then explore named areas, span syntax, and a full-width hero section.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

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

header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }

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

.layout {
  grid-template-areas:
    "hero hero"
    "content sidebar";
}

.hero { grid-area: hero; }

♿ Accessibility

• Keep logical DOM order even when grid-area visually repositions items.
• Use semantic HTML (header, main, nav) alongside named areas.
• Test keyboard focus order when grid placement changes on responsive breakpoints.
• Do not rely on position alone to convey meaning or hierarchy.
• Ensure readable content width in spanned grid cells on large screens.

💡 Best Practices