named-grid-areas-no-invalid.md

Pattern: Invalid named grid area

Issue: -

Description

Detects invalid named grid areas.

a { grid-template-areas:
      "a a a"
      "b b b"; }
/**   ↑
 *  This named grid area */

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

The following patterns are considered violations:

a { grid-template-areas: "" }

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

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

The following pattern is not considered a violation:

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

Further Reading

• stylelint - named-grid-areas-no-invalid