Skip to main content

prefer-gap-properties

Prefer modern gap, row-gap, and column-gap over legacy grid gap aliases.

This rule is autofixable.

Incorrectโ€‹

.layout {
  display: grid;
  grid-gap: 1rem;
  grid-column-gap: 2rem;
}

Correctโ€‹

.layout {
  display: grid;
  gap: 1rem;
  column-gap: 2rem;
}

Stylelint Configโ€‹

export default {
  plugins: ["stylelint-plugin-grid"],
  rules: {
    "grid/prefer-gap-properties": true
  }
};