[csswg-drafts] [css-grid-3] Reconsidering the value space of `grid-auto-flow` (#10902)

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

== [css-grid-3] Reconsidering the value space of `grid-auto-flow` ==
We recently introduced reversing abilities to `grid-auto-flow`, and are re-using the syntax from `flex-flow`:

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

Grid placement doesn't really distinguish between wrapping or not wrapping though; wrapping isn't really a concept in Grid. So `wrap-reverse` feels a little awkward.

I am wondering if it would make sense to switch to different syntax, such as a syntax that explicitly says the fill order in each axis, in priority order, like this:

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

where the first value says what you fill first, and the second what you fill second (defaulting to the forwards direction of the opposite axis), e.g.

```
grid-auto-flow: row column-reverse;
```
wolud fill each row start to end, then add rows stacking backwards (essentially reversing the contents of each column). More examples:

```
grid-auto-flow: row column; /* fill by row, stacking to fill columns */
grid-auto-flow: column row; /* fill by column, stacking to fill rows */
grid-auto-flow: column-reverse row; /* fill each column in reverse order, adding columns to fill rows */
etc.
```

Thoughts?

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


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

Received on Monday, 16 September 2024 19:24:15 UTC