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

@fantasai and I did some brainstorming yesterday to reconcile our ideas: keeping the "track-centric" naming system from my counter-proposal that I find important, while reducing the amount of divergence among the layout modes in it, which fantasai finds important. I think this proposal we've come up with is acceptable, and sufficiently extensible for future layout modes.

```
item-track: auto | row | column | row-reverse | column-reverse
item-cross: [ [ nowrap | wrap ] || [ normal | reverse ] ] | wrap-reverse
    /* wrap-reverse is a combination of wrap and reverse, for convenience */
item-pack: normal | dense || [ collapse | balance ]
item-slack: normal | <length-percentage> | infinite
item-flow: <'item-track'> || <'item-cross'> || <'item-pack'> || <'item-slack'>
```

The core difference between this proposal and Apple's proposal is how they map onto the two axes: in this proposal, row/column/etc describes the track axis--i.e. the resulting layout that you see--whereas in Apple's proposal it describes the primary placement direction. (That is, "a masonry layout, arranged into columns" uses the `column` keyword, same as "a flexbox layout, arranged into columns" does.) I believe this is *greatly* more intuitive, even though it means that flex/grid and masonry layouts that flow in a given direction can't share their `item-flow` values.

It also generalizes the property name and values for the "cross axis flow" property, called `item-cross` here: rather than being intrinsically wrap-specific, it just uses `normal`/`reverse` and leaves the exact interpretation up to the layout mode. In Flexbox/Grid it's the direction you add new tracks in; in Masonry it's the direction you break ties in when there are multiple tracks with the same height. `wrap`/`nowrap` only mean something in Flexbox; Grid *always* wraps, and Masonry doesn't have a wrapping concept in that axis, so they ignore those keywords if specified. Future layout modes can define what their cross-axis direction means, and if wrapping is optional, can pay attention to the wrap keywords.

It otherwise matches @fantasai's earlier proposal wrt the other properties `item-pack` and `item-slack`. (I'll want to quibble over the definitions of the Flexbox dense & slack behavior, but that's a different issue.)

Some examples:
    
```
// create a column masonry:
display: grid;
grid-template-columns: ...;
item-flow: collapse;  // because grid-template-rows: none, resolve "item-track:auto" to "column"

// create an auto-flowing grid growing downward
display: grid;
grid-template: ...
item-flow: row; // not strictly necessary; 'item-track' defaults to "row" in non-Masonry Grid.

// create a row flexbox
display: flex;
// in flexbox, "item-track:auto" defaults to "row"
```

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11480#issuecomment-2620453349 using your GitHub account


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

Received on Wednesday, 29 January 2025 01:42:01 UTC