noInvalidGridAreas (CSS)

Language CSS

Summary

Rule available since: v1.9.0
Diagnostic Category: lint/correctness/noInvalidGridAreas
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as named-grid-areas-no-invalid
- Same as css/no-invalid-named-grid-areas

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "noInvalidGridAreas": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow invalid named areas in CSS grid templates.

Each quoted row in grid-template-areas contains space-separated cells. Every row must contain the same number of cells and must not be empty. When an area name appears in more than one cell, those cells must form one filled rectangle.

Examples

Invalid

1
a { grid-template-areas: "a a"
2
                         "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.

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

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.

1
a { grid-template-areas: "a a a"
2
                         "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

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

1
a { grid-template-areas: "a a a"
2
                         "a a a"; }