跳转到内容

noInvalidGridAreas

Diagnostic Category: lint/correctness/noInvalidGridAreas

Since: v1.9.9

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.

a { 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

a { grid-template-areas: "a a a"
"b b b"; }
a { grid-template-areas: "a a a"
"a a a"; }