noInvalidGridAreas
Diagnostic Category: lint/correctness/noInvalidGridAreas
Since: v1.9.0
Sources:
Disallows invalid named grid areas in CSS Grid Layouts.
For a named grid area to be valid, all strings must define:
- the same number of cell tokens
- at least one cell token
And all named grid areas that spans multiple grid cells must form a single filled-in rectangle.
Examples
Section titled ExamplesInvalid
Section titled Invalida { grid-template-areas: "a a" "b b b"; }code-block.css:1:26 lint/correctness/noInvalidGridAreas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Inconsistent cell count in grid areas are not allowed.
> 1 │ a { grid-template-areas: “a a”
│ ^^^^^
2 │ “b b b”; }
3 │
ℹ Consider adding the same number of cell tokens in each string.
a { grid-template-areas: "b b b" ""; }code-block.css:1:33 lint/correctness/noInvalidGridAreas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Empty grid areas are not allowed.
> 1 │ a { grid-template-areas: “b b b”
│
> 2 │ ""; }
│ ^^
3 │
ℹ Consider adding the cell token within string.
a { grid-template-areas: "a a a" "b b a"; }code-block.css:1:33 lint/correctness/noInvalidGridAreas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Duplicate filled in rectangle are not allowed.
> 1 │ a { grid-template-areas: “a a a”
│
> 2 │ “b b a”; }
│ ^^^^^^^
3 │
ℹ Consider removing the duplicated filled-in rectangle: a
Valid
Section titled Valida { grid-template-areas: "a a a" "b b b"; }a { grid-template-areas: "a a a" "a a a"; }