validate-area-shapes

Require every named grid template area to form one contiguous rectangle.

CSS Grid rejects non-rectangular areas. This rule catches the problem at the authored template declaration instead of leaving it to browser behavior.

Incorrect

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

Correct

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

Stylelint Config

export default {
  plugins: ["stylelint-plugin-grid"],
  rules: {
    "grid/validate-area-shapes": true
  }
};

Related Rules

• no-invalid-areas catches malformed template strings before shape validation matters.
• validate-track-counts checks the track dimensions for the same template.
• no-mismatched-template-rows focuses only on row-count drift.