Skip to main content

require-explicit-rows-with-column-flow

Require explicit row sizing when a rule uses grid-auto-flow: column.

Column auto-placement fills columns instead of rows. Without row sizing in the same block, browsers can create implicit tracks in surprising ways and produce a single long row-like layout. This rule asks for either grid-template-rows or grid-auto-rows next to the grid-auto-flow: column declaration.

This is intentionally an opt-in policy rule. It checks same-block declarations only and does not try to infer row sizing from other selectors or media-query cascade layers.

Incorrectโ€‹

.cards {
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
}

Correctโ€‹

.cards {
  grid-auto-flow: column;
  grid-auto-rows: minmax(10rem, auto);
}
.cards {
  grid-auto-flow: column;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

Stylelint Configโ€‹

export default {
  plugins: ["stylelint-plugin-grid"],
  rules: {
    "grid/require-explicit-rows-with-column-flow": true
  }
};