[csswg-drafts] [css-flexbox][css-grid] Unifying grid-auto-flow and flex-flow (#11480)

fantasai has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox][css-grid] Unifying grid-auto-flow and flex-flow ==
The [TAG response to the masonry syntax issue](https://github.com/w3ctag/design-reviews/issues/1003#issuecomment-2489688718) asked us to look into unifying controls for our layout modes, calling out `grid-auto-flow` and `flex-flow` (`flex-direction` + `flex-wrap`) in particular. Apple looked into this, and we have the following syntax proposal:

**`item-flow`** aliased to both `flex-flow` and `grid-auto-flow` and defined as a shorthand for the following properties:

*` item-direction: row | column | row-reverse | column-reverse`  (also aliased as `flex-direction`)
* `item-wrap: normal | wrap | wrap-reverse | nowrap` (also aliased as `flex-wrap`)
    * `normal` computes to either `wrap` (for Grid) or `nowrap` (for Flexbox)
    * `nowrap` in Grid would mean autoplacement adds implicit tracks instead of wrapping to the next row
* `item-pack: normal | dense` 
    * Defining `dense` packing for Flexbox would mean that instead of breaking lines as soon as an item can’t fit, we try to cram in one more, triggering `flex-shrink` behavior instead of `flex-grow` on that line. See https://github.com/w3c/csswg-drafts/issues/3071.
    * This syntax allows the potential to expand packing controls, e.g.  `item-pack: normal | dense || [ collapse | balance ]` could be `collapse` triggering a masonry-style layout for Grid (see https://github.com/w3c/csswg-drafts/issues/11243), and `balance` opting into balanced line-wrapping for Flexbox (https://github.com/w3c/csswg-drafts/issues/3070).
* `item-slack: <length-percentage>`
    * This is the `masonry-slack` property. See https://github.com/w3c/csswg-drafts/issues/10884.
    * For Flexbox, slack could say at what point you switch from loose packing to cramming:
        * In normal mode, `10px` slack would mean “if there’s only 10px overflow on this line when adding the next item, cram it in anyway, as squeezing in an extra 10px is no big deal”.
        * In dense mode, `10px` slack would mean “if there’s only 10px empty space left on this line, don’t try to cram in the next item, that’s too much cramming”.

**Caveats:** This would make `flex-flow` and `grid-auto-flow` cascade as a single property, which is a change in behavior and therefore could have some Web-compat impact.

**Variations:** This is our initial sketch, but there are some variations we’ve considered:

* We’re unsure if `item-slack` should be a longhand of `item-flow` or not: it's often nice to put it in the `item-flow` shorthand, but it might also make sense for it to cascade independently.
* We’re open to ideas about the `item-` prefix. Ideas we’ve come up with so far include `item-`, `box-`, `items-`, and `placement-`. (We’re drawing the “item” terminology from the specs and from the `align-items` property.)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11480 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 11 January 2025 01:23:50 UTC