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

The CSS Working Group just discussed `https://github.com/w3c/csswg-drafts/issues/12803`.

<details><summary>The full IRC log of that discussion</summary>
&lt;ntim> topic: https://github.com/w3c/csswg-drafts/issues/12803<br>
&lt;ntim> github: https://github.com/w3c/csswg-drafts/issues/12803<br>
&lt;ydaniv> fantasai: going back to item flow discussions we had previously<br>
&lt;ydaniv> ... there's been discussion on what the syntax should be<br>
&lt;ydaniv> ... TabAtkins and iank_ said we should not go with what grid does<br>
&lt;ydaniv> ... this is blocking impl. work<br>
&lt;ydaniv> ... we still need to decide what longhand do<br>
&lt;ydaniv> ... we need to underline longhands<br>
&lt;astearns> s/underline/underlying/<br>
&lt;ydaniv> ... we need to resolve on what they are?  what the values are? and shorthands later<br>
&lt;ydaniv> ... we have a proposal with counter arguments<br>
&lt;ydaniv> ... we have to decide are using grid properties, or minting new ones<br>
&lt;ydaniv> ... what are those properties? what are the values? and what they're mapped to?<br>
&lt;ydaniv> ... also discussed about "auto"<br>
&lt;ydaniv> TabAtkins: I'll present while reusing grid-auto-flow is not correct<br>
&lt;ydaniv> ...  if you want waterfall layout [missed]<br>
&lt;astearns> s/waterfall/grid-lane/<br>
&lt;miriam> I think 'waterfall' in this case refers specifically to vertical grid-lanes<br>
&lt;astearns> yes<br>
&lt;emilio> TabAtkins: to avoid confusion we've referred to waterfall and brick<br>
&lt;emilio> ... if you have a waterfall layout you have columns, that's also the initial value because it's the most common initial value for grid-lanes<br>
&lt;florian> q+<br>
&lt;emilio> ... grid-auto-flow initial value is row<br>
&lt;emilio> ... so we'd need to magic up a new initial value<br>
&lt;emilio> fantasai: which we planned to do anyways<br>
&lt;emilio> TabAtkins: not for grid<br>
&lt;emilio> ... secondly grid-auto-flow, row vs row-reverse, they change whether items autoflow ltr or rtl<br>
&lt;emilio> ... in grid-lanes a lot of people have the intuition that the primary direction should be the direction where they break ties<br>
&lt;emilio> ... you'd start rtl again even with a column layout<br>
&lt;fantasai> s/discussed about "auto"/discussed about "auto" initial value for the flow direction, to automatically decide based on the -template properties; but this needs to be renamed (maybe to normal) to avoid conflicts in grid shorthand with 'auto' track sizing/<br>
&lt;emilio> ... so if we reuse grid-auto-flow, row-reverse would mean a different thing than in grid-lanes<br>
&lt;emilio> ... would mean perpendicular axis<br>
&lt;emilio> ... because you want columns to be ltr columns and column-reverse to be rtl<br>
&lt;emilio> ... in grid your default is row / row-reverse<br>
&lt;emilio> ... if you say column that means top to bottom or bottom to top<br>
&lt;miriam> almost makes you think we should call it the same thing as in grid…<br>
&lt;emilio> ... this is due to the distinction between flow direction and track direction. In flexbox and grid they are aligned in masonry they are opposite<br>
&lt;ntim> q+<br>
&lt;emilio> ... so reusing the same terms that mean track / direction in grid but giving the keywords a perpendicular meaning doesn't seem good to learning how these work<br>
&lt;miriam> q+<br>
&lt;emilio> ... it might be if waterfall layout was rows<br>
&lt;emilio> ... but it's not<br>
&lt;emilio> ... so we should mint a new property<br>
&lt;emilio> ... grid-lanes specifically<br>
&lt;florian> q?<br>
&lt;emilio> ... so I think we should do that instead of changing the meaning of specific values in grid-lanes masonry<br>
&lt;emilio> astearns: this felt two introductions about two different topics<br>
&lt;emilio> ... let's go through the queue and see if we can get some clarity<br>
&lt;astearns> ack florian<br>
&lt;emilio> florian: my initial impression was a bit similar to tab in the sense of of course waterfall should be column<br>
&lt;emilio> ... but looking at it I don't think we're calling it anything<br>
&lt;emilio> ... we're controlling aspects of the design<br>
&lt;emilio> ... so sure if you look at it I see columns<br>
&lt;emilio> ... but even then depending on the property I'm comfortable saying that the flow of the items in a waterfally grid-lane goes by row<br>
&lt;emilio> ... and that seems fine to me<br>
&lt;emilio> TabAtkins: if the thing that determines the direction uses rows for masonry which uses grid-template-columns etc for everything<br>
&lt;emilio> ... I'd formally object to that<br>
&lt;emilio> florian: just saying that I don't have the same opinion<br>
&lt;oriol> I agree with Tab it would be super confusing<br>
&lt;emilio> TabAtkins: I'd formally object to that<br>
&lt;astearns> ack ntim<br>
&lt;emilio> ntim: re. flow vs track<br>
&lt;florian> s/just saying that I don't have the same opinion/just saying that I used to have the same opinion, but no longer to<br>
&lt;emilio> ... I think that track direction doesn't really matter, ATs what you experience is the flow direction not track direction<br>
&lt;florian> s/longer to/longer do<br>
&lt;emilio> ... if you really care about track and ?? then you use multicol<br>
&lt;emilio> ... I'd probably object if we were to consider the track direction was the primary one<br>
&lt;astearns> ack miriam<br>
&lt;emilio> miriam: Thanks for not taking into account our opinions<br>
&lt;emilio> ... you wanted us to follow up, we did, we disagree with you and now it's a formal objection situation<br>
&lt;emilio> ... have no power in that situation, that's cool, have fun with it<br>
&lt;emilio> astearns: I'm with you in the frustration but you can formally object as a member of this group<br>
&lt;emilio> fantasai: you don't even need to be a member, anyone can literally formally object<br>
&lt;astearns> ack fantasai<br>
&lt;emilio> ... I want to present my position and counter proposal<br>
&lt;emilio> ... we think that keeping the properties consistent with grid is better<br>
&lt;emilio> ... therefore we should use grid-auto-flow, and interpret the values in the same way<br>
&lt;emilio> ... if you switch display the overall layout would flow in the same direction<br>
&lt;emilio> ... TabAtkins mentioned that he wants a shorthand<br>
&lt;emilio> ... and if you write row 200px<br>
&lt;fantasai> grid-lanes: row 100px 200px;<br>
&lt;fantasai> grid-template-columns: 100px 200px;<br>
&lt;emilio> ... which would be confusing<br>
&lt;fantasai> grid-auto-flow: row;<br>
&lt;emilio> ... I have several suggestions<br>
&lt;emilio> ... first one is we've discussed grid-auto-flow initial value would be normal<br>
&lt;emilio> ... and depending on grid-template-rows/columns we'd pick the correct flow direction<br>
&lt;emilio> ... whichever one is none picks the flow direction<br>
&lt;emilio> ... now grid-lanes sets grid-template-{rwos,columns,areas} and grid-auto-flow, ... either to the initial value or something else<br>
&lt;emilio> ... I suggest changing grid-lanes to instead of `row` being a grid-auto-flow<br>
&lt;emilio> ... value, we'd change it to `rows`<br>
&lt;emilio> ... and then set grid-template-rows<br>
&lt;TabAtkins> my point is and has been that *this* would be a terrible mistake that I can't allow as editor of the spec:<br>
&lt;TabAtkins> <br>
&lt;TabAtkins> .waterfall {<br>
&lt;TabAtkins>  display: grid-lanes;<br>
&lt;TabAtkins>  grid-template-columns: 100px auto;<br>
&lt;TabAtkins>  column-gap: 1em;<br>
&lt;TabAtkins>  column-rule: thin solid silver;<br>
&lt;TabAtkins>  grid-auto-flow: ROW????!?!?<br>
&lt;TabAtkins> }<br>
&lt;fantasai> grid-lanes: rows 100px 200px;<br>
&lt;fantasai> grid-template-rows: 100px 200px;<br>
&lt;fantasai> grid-template-columns: none;<br>
&lt;fantasai> grid-auto-flow: normal;<br>
&lt;emilio> fantasai: I think that resolves the biggest syntactical problem<br>
&lt;emilio> ... instead of saying what the auto-flow value is, it decides which template prop we set<br>
&lt;alisonmaher> q+<br>
&lt;emilio> ... the shorthand also becomes useful for grid layout<br>
&lt;emilio> astearns: Is that proposal in the issue?<br>
&lt;emilio> fantasai: thought of it a bit too late<br>
&lt;emilio> astearns: we should've deferred this then<br>
&lt;emilio> ... to give people some time to look at it<br>
&lt;emilio> fantasai: last part is what about grid-auto-flow<br>
&lt;emilio> ... currently it takes {row, column, dense}<br>
&lt;emilio> ... recently we introduced reverse-*<br>
&lt;TabAtkins> [ row | column ] || dense<br>
&lt;emilio> ... we think we should have a consistent interpretation<br>
&lt;emilio> ... I think most people don't need this property on masonry except if you're doing reversing<br>
&lt;astearns> s/masonry/grid-lanes/<br>
&lt;emilio> ... we have row-reverse | column-reverse || wrap-reverse<br>
&lt;emilio> ... so that's confusing, but also the interpretation of row and columns is confusing<br>
&lt;emilio> ... so I think it'd be clearer if we named the keywords as primary-direction followed by secondary<br>
&lt;emilio> ... so grid-auto-flow: row-column | column-row<br>
&lt;emilio> ... so you can do [row | row-reverse] || [column | column-reverse]<br>
&lt;florian> q?<br>
&lt;florian> q+<br>
&lt;emilio> ... so I think that might be a bit more straight-forward<br>
&lt;astearns> zakim, close queue<br>
&lt;Zakim> ok, astearns, the speaker queue is closed<br>
&lt;lea> +1 for reusing `grid-auto-flow`<br>
&lt;emilio> ... altogether, main point I want to put forward is that grid-lanes should have a keyword representing the suffix of the template property<br>
&lt;emilio> ... and we should reuse grid-auto-flow matching grid<br>
&lt;emilio> ... I think that addresses most of the key points on both sides of the argument<br>
&lt;emilio> q?<br>
&lt;ntim> what is primary vs secondary?<br>
&lt;dholbert> For the part with primary direction followed by secondary direction, I'm a bit uneasy that folks will forget what primary/secondary are here (similar to how waterfall is sort-of rows but nobody thinks of it like that)<br>
&lt;astearns> ack alisonmaher<br>
&lt;emilio> alisonmaher: +1 to alan, would be useful to see this in the issue<br>
&lt;emilio> ... I think it's a promising direction<br>
&lt;emilio> ... but there are a few side effects<br>
&lt;TabAtkins> yeah, this entire idea is new to me, and I don't think it solves several of the issues. take to the issue.<br>
&lt;ntim> Is primary the flow direction? and secondary the track direction?<br>
&lt;fantasai> primary is the first direction you go, secondary is the second direction you go<br>
&lt;emilio> ... afaiu right now `grid-lanes: rows none` you'd get a columns lanes with the template of none<br>
&lt;emilio> ... which means you can't have a row-based masonry without a track definition<br>
&lt;emilio> ... we could potentially handle this with some grid-lanes-orientation thing or something<br>
&lt;fantasai> You can, you would use grid-auto-flow, just wouldn't use the shorthand<br>
&lt;emilio> ... and that'd always tell you which one to use<br>
&lt;fantasai> grid-auto-flow *is* the orientation controlhere.<br>
&lt;emilio> ... the other one is reusing grid-auto-flow would be a bit weird<br>
&lt;emilio> ... so grid-lanes: columns and grid-auto-flow: column, it won't do anything because in masonry you can't have your flow items in the column direction when ??<br>
&lt;emilio> fantasai: it can, the default auto-flow chooses based on templates, but non-initial values you get what you asked<br>
&lt;emilio> alisonmaher: I think it'd be clear if we had a grid-lanes-flow<br>
&lt;astearns> ack florian<br>
&lt;emilio> florian: I understand the proposal is very fresh but I think it's useful to discuss it<br>
&lt;emilio> ... it came out from the fact that we're at TPAC, this is an issue that needs solving and the ability to talk about this is great<br>
&lt;emilio> ... even if we don't resolve I think it's important to discuss this to get it unstuck<br>
&lt;emilio> ... I'd need more time to think about part 3 because that's very fresh<br>
&lt;emilio> ... 1 and 2 make a lot of sense to me<br>
&lt;emilio> ... we get around TabAtkins and ntim's formal objection<br>
&lt;emilio> ... because you use columns to define grid-lane<br>
&lt;emilio> ... and the low-level controls is mostly automatic but when it's not it does the thing ntim wants<br>
&lt;emilio> ... but I'm optimistic<br>
&lt;emilio> astearns: let's discuss this during the break<br>
&lt;emilio> ... I think throwing around formal objections was inappropriate and unproductive<br>
&lt;emilio> TabAtkins: was just repeating my words from a few weeks ago<br>
&lt;emilio> astearns: I hadn't put it on the agenda because I knew we weren't going to get anywhere, but I readded I got told we'd talk about smaller topics<br>
&lt;emilio> fantasai: we did<br>
&lt;astearns> zakim, open queue<br>
&lt;Zakim> ok, astearns, the speaker queue is open<br>
&lt;emilio> astearns: anyways for now hallway conversation, let's go back to mixins for a bit<br>
</details>


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


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

Received on Friday, 14 November 2025 05:49:09 UTC