Re: [csswg-drafts] [css-grid-3][masonry] item-flow row vs. column in masonry layouts (#12803)

> [!NOTE]
> Thanks to the new `normal` initial value, unless you're specifically reversing one of the flow directions, there's not really any reason to use these properties at all. They're needed for the shorthanding model, and to make Grid Lanes a little more consistent with the other layouts. Authors will, almost always, just set one of `grid-template-columns` or `grid-template-rows` to define their grid lanes, and it'll just do The Obvious Correct Thing.
>
> Example: Lanes are columns!
> ```
> display: grid-lanes;
> grid-template-columns: 100px 200px;
> ```
> 
> Example: Lanes are rows!
> ```
> display: grid-lanes;
> grid-template-rows: 100px 200px;
> ```

Here is an overview of the syntax options under debate!

## Option A: grid-lanes-specific flow properties

```
grid-lanes-direction: normal | [ row | column ] [ fill-reverse || track-reverse ]?
grid-lanes-pack: normal | dense
```
* “waterfall” is `grid-lanes-direction: column`; “bricks” is `grid-lanes-direction: row`.
* This describes what the “lanes” in the Grid Lanes model are: columns, or rows. 
* It matches what layout concept is important to think about in virtually all situations. For example, in “waterfall”, the items do alignment (align/justify-self/content) in a group with the other items in their *column* - the items *themelves* are aligned with `justify-self` and `align-content` (by themselves horizontally, but as a group vertically). `align-self` simply doesn't work (same reason it doesn't work in block, the layout is flowing vertically), and `justify-content` doesn't align the items at all, but moves up a level and aligns the *columns*.
* It also matches what set of row/column properties you use to set the layout: if `column`, then you use `grid-template-columns`, `column-gap`, `column-rule` on the container and `grid-column` on the items (the `*-row` properties do nothing); if `row` you use the `*-row` variants (and the `*-column` variants do nothing).
* `fill-reverse` changes the direction that tracks fill themselves; columns fill from bottom-up, rows fill rtl (in English).
* `track-reverse` changes the order you choose tracks when they're tied and what direction the track cursor moves in; columns choose the rightmost (in English) and go left; rows choose the bottommost and go up.
* `normal` just chooses the direction based on `grid-template-*`, as already resolved. (If one is none, it matches the non-none; if both or neither are none, it defaults to `column`.)

Note: We could also add `grid-lanes-flow` shorthanding `grid-lanes-direction` and `grid-lanes-pack`, similar to how `flex-flow` shorthands `flex-direction` and `flex-wrap`. Don't necessarily need to, tho, since the `grid-lanes` shorthand is right there and easy to use too.

Additionally/separately, we would also add reversing capabilities to Grid by expanding `grid-auto-flow`, either **(A1)** with a Flex-compatible syntax (as in Option B) or **(A2)** a new track-focused syntax (as in Option C).

*This would give Grid Lanes its own direction property, like Flexbox and Grid have their own (`flex-direction`/`flex-wrap`, and `grid-auto-flow`) with their own similar but layout-specialized syntaxes.*

## Option B: Reuse grid-auto-flow, and extend with flex-compatible syntax

```
grid-auto-flow: normal | [ row | row-reverse | column | column-reverse ]
                || [ wrap | wrap-reverse ] || dense
```

### Option B1: flow-focused interpretation
* `[ row | row-reverse | column | column-reverse ]` represents the primary placement axis (same as in Grid).
* “Waterfall” is `grid-auto-flow: row`, representing a “collapsed” version of the equivalent Grid layout.
* `row-reverse`/ `column-reverse` reverses placement direction in the primary axis (i.e. breaking ties for auto-placement).
* `wrap-reverse` stacks bottom up (waterfall), or end to start (brick).

### Option B2: track-focused interpretation
* `[ row | row-reverse | column | column-reverse ]` represents the lanes orientation.
* “Waterfall” is `grid-auto-flow: column`, opposite of interpretation in grid layout but focusing on the lane type as in (A).
* `row-reverse`/ `column-reverse` reverses placement direction in the primary axis (i.e. breaking ties for auto-placement).
* `wrap-reverse` stacks bottom up (for “waterfall”), or end to start (for “brick”).

*These syntaxes would keep Grid and Grid Lanes `grid-auto-flow` syntax shared and consistent with `flex-flow`, including the addition of reversing controls for both.*

## Option C: Reuse grid-auto-flow, but extend with new track-flow syntax
```
grid-auto-flow: normal | [ [ row | row-reverse ] || [ column | column-reverse ] ] || dense
```
* The two track keywords represent the primary placement axis and the secondary placement axis, in that order; missing second keyword is the opposite orientation of the first.
* “Waterfall” is `grid-auto-flow: row column` (short form `grid-auto-flow: row`).
* `-reverse` reverses placement direction within the specified track, e.g. in English, `column-reverse` stacks from the bottom and `row-reverse` places right to left.

*This would keep Grid and Grid Lanes `grid-auto-flow` syntax shared, including the adition of reversing controls for both, but diverge from `flex-flow`.*

## Existing Syntax (for reference)

**Flex Layout:** `flex-flow: [ row | row-reverse | column | column-reverse] || [ nowrap | wrap | wrap-reverse ]`
**Grid Layout:** `grid-auto-flow: [ row | column ] || dense`

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


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

Received on Thursday, 11 December 2025 21:56:36 UTC