Skip to main content

prefer-minmax-zero-fr

Prefer minmax(0, <flex>) for bare flexible CSS Grid column tracks.

Bare fr column tracks use an automatic minimum size, so long content can force columns wider than intended. Wrapping the flexible track in minmax(0, โ€ฆ) keeps the column flexible while allowing content to shrink or overflow according to the rest of the layout rules.

Incorrectโ€‹

.layout {
  grid-template-columns: 1fr 2fr;
}

Correctโ€‹

.layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.layout {
  grid-template-columns: repeat(2, 1fr);
}

Stylelint Configโ€‹

export default {
  plugins: ["stylelint-plugin-grid"],
  rules: {
    "grid/prefer-minmax-zero-fr": true
  }
};