[csswg-drafts] Proposal: wrap-strategy: balanced for visually balanced grid/flex wrapping (#12264)

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