Skip to main content

no-invalid-auto-repeat

Disallow definitely invalid CSS Grid auto-repeat track sizes.

CSS Grid auto-repeat only accepts fixed track sizes. This rule catches common invalid patterns such as bare fr tracks and minmax() calls with intrinsic or flexible minimums inside repeat(auto-fit, ...) or repeat(auto-fill, ...).

The rule checks grid-template-columns and grid-template-rows. It avoids reporting runtime-dependent values such as var() and env().

Incorrectโ€‹

.cards {
  grid-template-columns: repeat(auto-fit, 1fr);
}
.cards {
  grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
}

Correctโ€‹

.cards {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.cards {
  grid-template-columns: repeat(auto-fill, [card] minmax(0, 1fr));
}

Stylelint Configโ€‹

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