Open
Description
Summary:
Introduce a new CSS property wrap-strategy to guide how items are wrapped in multi-line layouts. The value balanced would ensure items are distributed across rows as evenly as possible, producing a visually symmetric layout.
Problem:
In responsive designs using Grid or Flexbox, wrapping often results in unbalanced layouts such as:
6 items
2 items
Or:
3 items
1 item
While technically valid, these layouts appear visually lopsided. Developers often want a more aesthetically balanced structure, such as:
4 items
4 items
Proposed syntax:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); // arbitrary example
wrap-strategy: balanced;
}
Behavior:
- wrap-strategy: balanced; tells the layout engine to distribute items across rows as evenly as possible, minimizing row count variance and avoiding visually imbalanced distributions.
- Works for both Grid and Flexbox with wrapping enabled.
- Takes effect when wrap or auto-layout is active.
Possible values:
- wrap-strategy: normal; (default behavior — fill row by row)
- wrap-strategy: balanced; (new behavior — balance item count per row)
Benefits:
- Visually pleasing and consistent layouts without manual intervention
- Eliminates the need for breakpoint-based overrides
- Encourages semantically clean and adaptive CSS architecture