- From: Ran Karat via GitHub <noreply@w3.org>
- Date: Tue, 03 Jun 2025 10:17:38 +0000
- To: public-css-archive@w3.org
RanKarat has just created a new issue for https://github.com/w3c/csswg-drafts: == Proposal: wrap-strategy: balanced for visually balanced grid/flex wrapping == **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 Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12264 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 3 June 2025 10:17:39 UTC