Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

webkit.org

Post reply on HN
Print view View original

21–30 of 359 posts

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#21

Post by meandmycode »

m3h wrote: post #4

I am wondering whether it makes sense to keep adding more "layout" options to CSS, given that we have the legacy floats and then the modern flexbox and grid layout. If there are still cases that are not covered, perhaps a better solution to to have one final constraints-based system that covers all layout cases, even if it comes at the cost of complexity. The CSS frameworks and utility libraries will then be built on…

I'm dubious that a constraints system would ever be considered, CSS has so far had some strong goals around it's predictably on layout cost.. that said, Houdini layout proposal is the closest to your comment, offloading layout to an isolated js context https://github.com/w3c/css-houdini-drafts/blob/main/css-layo... .. but honestly flex and grid, plus other things like containment have solved so many things for folks now that there's just far less demand for improvement than the days before flex

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#22

Post by pavlov »

If the designers of Unix had seen the light of CSS, they wouldn’t have bothered with shells and file descriptors and C and Awk and all that composable flotsam.

They’d just created a single program, call it the “Central Software System”, and defined thousands of properties that let you control its state machine to produce the output you need.

Presto! The perfect computer. If for some reason someone needs a new kind of output, it can be added to the Central Software System via a friendly decade-long committee process.

And if the properties happen to conflict in how they define some output, well, the one company in the world who has actually implemented all of this “open standard” can decide what happens in that case.

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#23

Post by blowski »

pavlov wrote: post #16
isodev wrote: post #10

Earlier quoted context omitted.

Because why introduce a custom abstraction to implement something with an imperative scripting language when you can achieve the same result with a declarative language built specifically to address this use case? You'd rather maintain all the maths and JS dependencies for this than have browsers just render what you want?

It’s been nearly 30 years now that we’ve heard this refrain about CSS. Somehow the dream of “just tell the browser to render what I want” still remains elusive. But maybe it’s just a few dozen more properties and mini-DSLs away this time! Pay no attention to those sirens and false prophets who still believe in anti-CSS “tell the computer how to do exactly what you want” programming…

Is it easier to build a layout with CSS compared to 20 years ago? Yes. Can we further improve CSS? Yes.

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#24

Post by rezonant »

chrismorgan wrote: post #15

I strongly dislike the megamenu demo https://webkit.org/demos/grid3/megamenu/ >, and feel masonry is completely inappropriate there. It makes a complete mess of flow direction, badly breaking expectations. The reading order you’d expect : https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-2.... . What the demo actually gives you: https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-1.... . This affects co…

So you're saying the a11y tree and tab ordering is bypassing the actual ordering of content and instead traversing the columns one by one? I'd call that a bug. In a masonry layout the expectation of a sighted user is that there is no continuity from column to column, but instead through the visual line. And the "unexpected" (disagree) ordering you show does that. I think the issue would be that tab ordering is ignoring the raw ordering of the content and instead trying to emulate something visual, almost certainly some kind of hold over of the implementation as it currently exists.

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#25

Post by sebstefan »

chrismorgan wrote: post #15

I strongly dislike the megamenu demo https://webkit.org/demos/grid3/megamenu/ >, and feel masonry is completely inappropriate there. It makes a complete mess of flow direction, badly breaking expectations. The reading order you’d expect : https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-2.... . What the demo actually gives you: https://temp.chrismorgan.info/2024-04-23-masonry-megamenu-1.... . This affects co…

That's just a random demo. It's not particularly relevant for the concept they're trying to gather feedback on

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#26

Post by pavlov »

isodev wrote: post #20
pavlov wrote: post #16

Earlier quoted context omitted.

It’s been nearly 30 years now that we’ve heard this refrain about CSS. Somehow the dream of “just tell the browser to render what I want” still remains elusive. But maybe it’s just a few dozen more properties and mini-DSLs away this time! Pay no attention to those sirens and false prophets who still believe in anti-CSS “tell the computer how to do exactly what you want” programming…

I'm no prophet and CSS, just like any other language has its quirks. And yeah, generally it is my job to try and tell computers what to do so I like powerful tools that let me do what i want :)

You’re missing the irony in the second paragraph. CSS proponents are ideologically opposed to simply telling the computer how to do what you want.

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#27

Post by sebstefan »

pavlov wrote: post #22

If the designers of Unix had seen the light of CSS, they wouldn’t have bothered with shells and file descriptors and C and Awk and all that composable flotsam. They’d just created a single program, call it the “Central Software System”, and defined thousands of properties that let you control its state machine to produce the output you need. Presto! The perfect computer. If for some reason someone needs a new kind of…

You can say that about almost any abstraction layer

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#28

Post by cfj »

mattbessey wrote: post #17

> This layout creates uniformly-sized columns, without any rows I find it amusing that they've decided to refer to this as masonry layout. If you actually built a wall like this (as opposed to uniformly-sized rows , without any columns ) it would be a structural engineering disaster.

Probably influenced by the most popular JavaScript library for achieving this type of layout, Masonry[0]. The author notes at the end of the article:

> But do expect the name of this value to change in the future. And perhaps prepare for a future where we call this “columnar grid” or “Grid Level 3” instead of “Masonry”.

[0] https://masonry.desandro.com/

Re: Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout

#30

Post by rezonant »

mattbessey wrote: post #17

> This layout creates uniformly-sized columns, without any rows I find it amusing that they've decided to refer to this as masonry layout. If you actually built a wall like this (as opposed to uniformly-sized rows , without any columns ) it would be a structural engineering disaster.

But masons build floors like this all the time, and it is not an engineering disaster. That's the metaphor.

The reason you think it would be a disaster is the load of gravity against it, a concept they have not yet introduced into CSS, thankfully.

Post reply on HN