Idea
A flexbox-based layout utility offered as an explicit alternative to the CSS-Grid-based primitives (.sf-grid, .sf-equal, .sf-grid-cols-*), for cases where item counts don't divide evenly and centering/stretching the last row's leftover items is desired — something CSS Grid handles awkwardly.
Why
We have .sf-cluster/.sf-reel (flex utilities for other purposes) and multiple grid primitives, but nothing positioned specifically as "the flex-based answer to uneven item counts in a grid-like layout." Worth a dedicated, clearly-named primitive rather than expecting users to repurpose .sf-cluster.
Scope
- Reuse existing
--sf-grid-gap/--sf-gap tokens for consistency with the rest of the grid system.
- Clarify in docs when to reach for this vs.
.sf-grid/.sf-equal, since the framework already has several grid-adjacent primitives — avoid overlapping/confusing guidance.
Idea
A flexbox-based layout utility offered as an explicit alternative to the CSS-Grid-based primitives (
.sf-grid,.sf-equal,.sf-grid-cols-*), for cases where item counts don't divide evenly and centering/stretching the last row's leftover items is desired — something CSS Grid handles awkwardly.Why
We have
.sf-cluster/.sf-reel(flex utilities for other purposes) and multiple grid primitives, but nothing positioned specifically as "the flex-based answer to uneven item counts in a grid-like layout." Worth a dedicated, clearly-named primitive rather than expecting users to repurpose.sf-cluster.Scope
--sf-grid-gap/--sf-gaptokens for consistency with the rest of the grid system..sf-grid/.sf-equal, since the framework already has several grid-adjacent primitives — avoid overlapping/confusing guidance.