[css-grid-3] Reconsidering the value space of grid-auto-flow

[fantasai]

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?

[tabatkins]

Grid placement doesn't really distinguish between wrapping or not wrapping though; wrapping isn't really a concept in Grid.

I don't think I agree with this. Grid auto-flowing certainly wraps - you auto-flow into a row, then wrap to the next row when you hit the end. That's exactly the same behavior you get out of Flexbox.

In general, so long as the concepts map appropriately, I'd prefer reusing microsyntaxes rather than inventing entirely new ones. This new microsyntax doesn't add any new abilities; it just re-spells wrap-reverse as row-reverse/column-reverse, and allows you to explicitly say wrap (by specifying row/column second; this value was intentionally omitted from this property since there's no nowrap to contrast it with).