no-invalid-named-grid-areas
June 27, 2025 ยท View on GitHub
Disallow invalid named grid areas.
Background
CSS Grid allows you to define named grid areas using the grid-template-areas property. Each string in the value creates a row, and each cell token in the string creates a column. Multiple cell tokens with the same name within and between rows create a single named grid area that spans the corresponding grid cells.
A named grid area is considered invalid if:
- The strings in the value have different numbers of cell tokens
- No cell tokens are present
- Cell tokens with the same name do not form a rectangle
Rule Details
This rule prevents invalid named grid areas in CSS grid templates.
Examples of incorrect code:
/* eslint css/no-invalid-named-grid-areas: "error" */
.grid {
grid-template-areas: "";
}
/* eslint css/no-invalid-named-grid-areas: "error" */
.grid {
grid-template-areas:
"header header header"
"nav main main main";
}
/* eslint css/no-invalid-named-grid-areas: "error" */
.grid {
grid-template-areas:
"header header header"
"nav main main"
"nav . main";
}
Examples of correct code:
/* eslint css/no-invalid-named-grid-areas: "error" */
.grid {
grid-template-areas:
"header"
"nav"
"main";
}
/* eslint css/no-invalid-named-grid-areas: "error" */
.grid {
grid-template-areas:
"header header header"
"nav main main"
"nav main main";
}
/* eslint css/no-invalid-named-grid-areas: "error" */
.grid {
grid-template-areas:
"header header header"
"nav . main"
"nav . main";
}
When Not to Use It
If you aren't concerned with invalid grid area definitions, then you can safely disable this rule.