Skip to main content

no-overlapping-areas

Disallow multiple selectors assigning the same single-name grid-area value in one stylesheet.

This rule is not recommended by default because some projects intentionally stack multiple items in the same area. Use it when duplicate area assignments usually indicate layout collisions in your codebase.

Incorrectโ€‹

.header {
  grid-area: header;
}

.mobileHeader {
  grid-area: header;
}

Correctโ€‹

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}
  • no-unused-areas verifies that declared template areas are actually assigned.
  • no-unknown-areas verifies that assigned area names exist in a template.
  • grid-all enables this stricter same-stylesheet rule.