CSS gridarea Property (original) (raw)
CSS grid-area Property
Last Updated : 11 Jul, 2025
The **grid-area property specifies a grid item's size and location in a grid layout. It allows you to define the starting and ending row and column lines for an item, or to assign a name to the item for easy reference in grid templates.
**Syntax
grid-area: grid-row-start | grid-column-start |
grid-row-end | grid-column-end | itemname;
**Property Values
| Property Value | Description |
|---|---|
| **grid-row-start | It sets the row on which the item is displayed first. |
| **grid-column-start | It sets the column on which the item is displayed first. |
| **grid-row-end | It specifies the row line to stop displaying the item or span how many rows. |
| **grid-column-end | It sets the number of columns to span. |
| **itemname | It sets a name for the grid item. |
**Example 1: Specifying Grid Area Position
In this example, we create a grid with one named area "Area" spanning three columns using grid-area. Other items fill the remaining cells with defined styling.
html `
CSS grid-area Property