Re: [csswg-drafts] [css-grid-3][masonry] Masonry Syntax Debate (#11243)

The CSS Working Group just discussed `[css-grid-3][masonry] Masonry Syntax Debate`, and agreed to the following:

* `RESOLVED: Re-use grid templating and placement properties for masonry layout`

<details><summary>The full IRC log of that discussion</summary>
&lt;bramus> fantasai: the 1st topic is should masonry use its own template props or should we reuse existing grid-template props?<br>
&lt;bramus> … (for placement)<br>
&lt;bramus> … we have gone of this before a bunch of times<br>
&lt;bramus> … the q is separate from the rest we believe<br>
&lt;bramus> … the q is to go for grid-template props or masonry-template props for defining tracks and for placement<br>
&lt;bramus> jensimmons: so there is lots of complexity<br>
&lt;bramus> … idea with just use grid is to stick to grid-template-* props<br>
&lt;bramus> … ide with masonry is to use separte tsyntax<br>
&lt;bramus> … since last meeting tab proposed to maybe the new masornry layout position we woul dneed to duliate a bunch of props<br>
&lt;bramus> … not a final decision but it is an idea that could get isolated from the rest<br>
&lt;bramus> … do we want to put to bed the masonry-template-* props and masonry-autuo-tracks and use the grid props where we can in order to not have duplication?<br>
&lt;bramus> fantasai: we are not  talking about grid-=auto-flow or masonry-…flow – is only about grid tpl properties<br>
&lt;bramus> … versus their masonry equivalent<br>
&lt;bramus> … and then grid-row vs ?? for placement<br>
&lt;TabAtkins> Just the "template" and "placement" properties.<br>
&lt;kbabbitt> s/vs ??/vs masonry-track/<br>
&lt;lea> Could someone summarize what the actual proposal is?<br>
&lt;bramus> jensimmons: do we want to resolve that no matter what we end up doing to not create 19 new props that are very similar<br>
&lt;alisonmaher> q+<br>
&lt;bramus> …  and try to use grid props as much as possible<br>
&lt;fantasai> s/and then/grid-template-* and grid-auto-* for track definition/<br>
&lt;bramus> astearns: so basic idea is masonry has some things that are identical to grid (or very close).<br>
&lt;TabAtkins> q+<br>
&lt;bramus> … grid tpl things, and so … just use grid props for that<br>
&lt;bramus> florian: separately from the rest<br>
&lt;astearns> ack alisonmaher<br>
&lt;bramus> alisonmaher: why for pos items having separate pros is useful for ergonomics<br>
&lt;bramus> ; if we use it for grid- props, authors could sset the wrong one int he wrong direction<br>
&lt;bramus> … would still parse but not give them the wanted result<br>
&lt;bramus> … separate tracks poisition would only apply in the direrctiont the author intended<br>
&lt;astearns> ack TabAtkins<br>
&lt;bramus> TabAtkins: this is not “hey, we are going to replace this with grid”. q is “whcih one should we go with“<br>
&lt;bramus> … reasons for either one<br>
&lt;bramus> … reusing grid props has benefit that confcepts are shared<br>
&lt;bramus> … layout algo talks in grid in many ways<br>
&lt;bramus> … few things to still deal with<br>
&lt;bramus> … initial value is a wrinkle<br>
&lt;bramus> … and auto filled tracks with intrinsic size<br>
&lt;bramus> … but its theoretically doable<br>
&lt;bramus> … potential to declare both rows and cols for grid<br>
&lt;bramus> … need to ignore one of the sets<br>
&lt;astearns> q+<br>
&lt;bramus> … masonry set of things mean that while these are a close duplicate in grammar, they are a single well designed thing that fits masonry perfectly\<br>
&lt;bramus> … some duplicate but better fit<br>
&lt;bramus> ; ntohnig needs tobe ignore in dweird cases<br>
&lt;bramus> … grid-tpl-areas is the one i am most uncomfortable with<br>
&lt;bramus> … dont like using<br>
&lt;bramus> … designed to do ascii art in grid<br>
&lt;bramus> … clever design<br>
&lt;bramus> … works perfectly there (in grid)<br>
&lt;bramus> … in masonry you dont have 2d grid<br>
&lt;bramus> … 1 set of tracks in 1 direction<br>
&lt;bramus> … ???<br>
&lt;bramus> … masonry cols is 1 string which ontains all cojum anmes<br>
&lt;bramus> … if you have rows you ahve mutliple strings with 1 row name in each string<br>
&lt;TabAtkins> "foo bar baz" vs "foo" "bar" "baz"<br>
&lt;bramus> … bc how oyou declare a sginel rolw multi col grid<br>
&lt;bramus> … that sort of grid is rare<br>
&lt;bramus> … ppl dont generally do that<br>
&lt;bramus> … if they do, the may or may not name their areas<br>
&lt;ntim> grid-template-areas: "r1c1 r1c2" "r2c1 r2c2"<br>
&lt;bramus> ; asklward that when depending on masorny direction you need a different syntax<br>
&lt;bramus> … could live iwth it, bu tnot great<br>
&lt;bramus> … leaning towards masonry props, but ok with either way.<br>
&lt;bramus> astearns: 1 more distinction<br>
&lt;bramus> … reusing grid props gives us that nice fallback fn thats been talked about in the grid proposal<br>
&lt;bramus> … that you dont have to redeclare a bunch of things<br>
&lt;TabAtkins> q+<br>
&lt;bramus> … and if we find that there is some problem with dev ergonomics in using the grid props for masonry<br>
&lt;bramus> … we coud prop by prop add a masonr equivalent when justfied by author usage<br>
&lt;astearns> ack astearns<br>
&lt;astearns> ack TabAtkins<br>
&lt;bramus> TabAtkins: it was imlplicit when i talked abou tsome masonry values that dont work well in grid<br>
&lt;bramus> … that means if we reuse same set of grid-tpl props, we need to define what that means for grid<br>
&lt;bramus> … can make it valid<br>
&lt;bramus> … ??<br>
&lt;bramus> … will continue to be a potential issue that any new prop needs to be defined for both at the same time<br>
&lt;fantasai> s/??/can define it as some fallback e.g. repeat resolves to 1/<br>
&lt;bramus> … if they are separte that does not need to happen<br>
&lt;bramus> … reuse on 1 side and independent definition on the other are two discussion topics<br>
&lt;florian> q+<br>
&lt;astearns> ack florian<br>
&lt;bramus> florian: for the wrinkle you talked about mastony tpl area<br>
&lt;bramus> … possibly we could add an optional keyword int he grid syntax that if you only have 1d it applies tot he primary direction<br>
&lt;bramus> … and in grid/masrony they have different meanings<br>
&lt;bramus> ; if you only use 1d, it uses the syntax<br>
&lt;bramus> … no need to deep dive, but its an option that might ease things<br>
&lt;astearns> ack fantasai<br>
&lt;bramus> TabAtkins: sounds fair<br>
&lt;bramus> fantasai: about authors to now knowing when to use grid-tpl-rows or cols<br>
&lt;bramus> ; dont think that will happen<br>
&lt;bramus> … if they get confused its about a prop that switches axies<br>
&lt;bramus> TabAtkins: agree that its a bit confusing there<br>
&lt;bramus> fantasai: about tpl syntax: arugment that tab is making is that its confusing that the syntax is differne between two differnt axis<br>
&lt;bramus> … but if we made it the same<br>
&lt;bramus> ; for both axis in masonry then in the masonry layout for in the row axis the tpl syntax would be diff from a grid layout<br>
&lt;bramus> … would be introducing that as an inconsistency<br>
&lt;bramus> … tpl syntax was designed for ascii art<br>
&lt;bramus> … still works for masonry<br>
&lt;bramus> … if you create cols you write your foo bar baz in a single string and then write track sizes<br>
&lt;bramus> … if you creata bunch of rows you put the names in a stack<br>
&lt;bramus> … as separate strings<br>
&lt;bramus> … and next to the name of the area you put the size<br>
&lt;bramus> … that lets ytou diagram your layout<br>
&lt;bramus> … was designed for that<br>
&lt;bramus> … its a feature of the tpl syntax carrying through into masonry<br>
&lt;TabAtkins> (we're pushing the `grid-template` shorthand to later, I have a much stronger objection to `grid-template`)<br>
&lt;bramus> … in the example you see two layouts. one is masonry and other is creating a strecthed alignmetn because its a grid<br>
&lt;bramus> … the grid tpl syntax supports both<br>
&lt;bramus> … much easier<br>
&lt;bramus> TabAtkins: tihe grid template shorthand and the grid shorthand is discussed later<br>
&lt;bramus> … much strong objection to the shorthand, dont want to discuss now<br>
&lt;bramus> fantasai: (missed)<br>
&lt;bramus> TabAtkins: no, the longhands<br>
&lt;bramus> … pseically the area one<br>
&lt;bramus> fantasai: when we look at diffs between grid tpl props and masrony tpl props there is very little difference<br>
&lt;bramus> … no need to introduce a lot of new props<br>
&lt;bramus> … bc authors could reuse the existing ones<br>
&lt;bramus> jensimmons: issue here is intended to shoot any of the other debats into silence<br>
&lt;bramus> … its a higher level question<br>
&lt;bramus> … can we make some progress around this 1 idea<br>
&lt;bramus> astearns: and the current high level idea is can we resolve on using grid-* props for masorny layout in general where it makes sense with case by case basis about when we actually need a new prop<br>
&lt;fantasai> grid-template-*/grid-auto-*/grid-row/grid-column vs masonry-template-*/masonry-auto*/masonry-track<br>
&lt;fantasai> Currently *only* about templating and placement properties<br>
&lt;bramus> … before we go to straw poll, anyone has concerns to this general principle of reusing grid props where appropriate?<br>
&lt;bramus> iank_: find it still more funky than masonry props<br>
&lt;bramus> TabAtkins: I think I outlined those objections before<br>
&lt;bramus> astearns: straw poll<br>
&lt;ntim> astearns: re-use the grid-template-areas properties or something else<br>
&lt;bramus> … 1. Reuse the grid template emplacement properties for masonry layout<br>
&lt;bramus> fantasai: this is about the longhands<br>
&lt;kbabbitt> s/emplacement/and placement/<br>
&lt;bramus> … 2. Have separate masonry versions for all of these<br>
&lt;fantasai> POLL: 1) Re-use grid template and placement properties for masonry layout VS 2. introduce dedicated templating and placement properties for masonry layout<br>
&lt;jensimmons> s/issue here is intended to shoot any of the other debats into silence/the issue is NOT to silence any further debates about details, but to<br>
&lt;florian> 1<br>
&lt;ntim> 1<br>
&lt;iank_> 2<br>
&lt;miriam> 1<br>
&lt;jfkthame> 1<br>
&lt;kizu> 1<br>
&lt;TabAtkins> 2<br>
&lt;alisonmaher> 2<br>
&lt;kschmi> 2<br>
&lt;schenney> 1<br>
&lt;fantasai> 1<br>
&lt;smfr> 1<br>
&lt;astearns> 1<br>
&lt;bts> 1<br>
&lt;emilio> 1<br>
&lt;jensimmons> 1<br>
&lt;lea> 1<br>
&lt;hober> 1<br>
&lt;oriol> 2<br>
&lt;rachelandrew> 2<br>
&lt;bkardell_> 1<br>
&lt;ethanjv> 2<br>
&lt;romain> 2<br>
&lt;dholbert> 1 but weak dependency on later decision about display value<br>
&lt;ChrisL> 1<br>
&lt;bramus> 2<br>
&lt;emilio> (+1 dholbert)<br>
&lt;emeyer> abstain<br>
&lt;ethanjv> (+1 dholbert)<br>
&lt;bramus> astearns: seeing slight but not overwheleming preference for 1<br>
&lt;bramus> emilio: e.g. i voted for 1 but could live with 2<br>
&lt;jfkthame> looks like 17 vs 9, or nearly 2:1<br>
&lt;ydaniv> abstain<br>
&lt;bramus> TabAtkins: this seems like a weak resolution for 1 and if people’s opinions shift we can adjust<br>
&lt;nicole> abstain<br>
&lt;bramus> astearns: proposal to take resolution for option 1 for now<br>
&lt;bramus> … objections?<br>
&lt;ntim> i don't think  2:1 ratio is a weak preference :)<br>
&lt;lea> 🎉<br>
&lt;fantasai> RESOLVED: Re-use grid templating and placement properties for masonry layout<br>
</details>


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


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

Received on Friday, 31 January 2025 18:02:37 UTC