Skip to main content

no-invalid-areas

Disallow malformed grid-template-areas declarations.

This rule reports:

  • values without quoted row strings
  • row strings with different column counts
  • area tokens that are neither valid custom identifiers nor blank . markers

Incorrectโ€‹

.layout {
  grid-template-areas:
    "header header"
    "nav";
}
.layout {
  grid-template-areas: "main 1bad";
}

Correctโ€‹

.layout {
  grid-template-areas:
    "header header"
    "nav main";
}

Stylelint Configโ€‹

export default {
  plugins: ["stylelint-plugin-grid"],
  rules: {
    "grid/no-invalid-areas": true
  }
};