Grid Area Placement Property
Last updated: 2026-09-13
grid-area Grid Area Placement Property
grid-area is a shorthand that places a grid item by setting all four values at once: grid-row-start, grid-column-start, grid-row-end and grid-column-end. It works with grid-line numbers for precise placement, or with a named area defined in grid-template-areas. It is the most flexible property for grid placement.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
grid-area: <grid-line> [ / <grid-line> ]{0,3};⚙️ Values
| Value | Type | Description |
|---|---|---|
<grid-line> [ / <grid-line> ]{0,3} | Value | Grid area shorthand |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-area | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： When the value of grid-area is an area name, the item is placed into the matching area defined in grid-template-areas.
Tip： With four values the order is: grid-row-start / grid-column-start / grid-row-end / grid-column-end.
❓ FAQ
QIs the grid-area shorthand the same as an area name?
AThey are related but different. The grid-area property is used on a grid item to place it; its value can be four grid-line numbers or a single area name. The strings such as "header" in a grid-template-areas template are area identifiers. Writing grid-area: header references the named area defined in the template - the two are connected through the area name.
QWhich is better, named areas or grid-line numbers?
AThere is no absolute winner. Named areas are the most readable and suit whole-page layouts: once the names are written into grid-template-areas, a child only needs grid-area: header for placement, and changing the layout means editing only the container template. Grid-line numbers are more precise for local span adjustments, such as a card that must cross two columns. Real projects usually mix both: named areas for the page skeleton, grid lines for the inner details.
QWhat do the four values in grid-area: 1 / 1 / 3 / 3 mean?
AThe four values map in order to grid-row-start / grid-column-start / grid-row-end / grid-column-end: the item starts at the intersection of row 1 and column 1 and ends at the intersection of row 3 and column 3, occupying a 2 by 2 rectangle. Remember the order “row start, column start, row end, column end”; the trailing values default to auto when omitted.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Grid Row Placement
Positions a grid item vertically
Grid Column Placement
Positions a grid item horizontally
