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

31–40 of 359 posts

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

#31

Post by smokel »

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…

They would probably also use regular expressions and incomprehensible $ and \ escape codes to retain some of the fun.

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

#32

Post by iainmerrick »

mg wrote: post #3

If one wants to do a "Masonry" layout, what's wrong with calculating it via JavaScript?

The main problem is that JS runs in a single thread and blocks the browser. Browsers jump through a ton of hoops to do scrolling and rendering on background threads while still allowing JS hooks and callbacks as required by web standards.

But, I think it's really the ONLY problem, and if you solve that problem, doing this stuff in JS would be the right answer. You'd be much more likely to get consistent behavior everywhere, without browser-specific quirks.

And part of the solution exists already! JS doesn't have to block the main thread any more, because you have things like Web Workers and WebAssembly.

Rather than adding another specific layout type, we should add a general-purpose way of hooking into the layout engine from a background task.

Update to add: just saw from another comment in this thread that there's already an effort underway to do this, called Houdini: https://news.ycombinator.com/item?id=40130487 Cool!

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

#33

Post by 627467 »

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.

"masonry layout" is a term used for at least a decade[0] Pinterest is probably the most famous implementer of this layout

[0] https://www.sitepoint.com/understanding-masonry-layout/

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

#34

Post by rezonant »

mg wrote: post #3

If one wants to do a "Masonry" layout, what's wrong with calculating it via JavaScript?

There is no reasonable fallback when JS is not present or hasn't yet executed, and that's not acceptable.

I can't stress enough how important this is for content experiences. Your content must display reasonably before all bells and whistles load, and when the bells and whistles load, your content had better not shift dramatically (ideally not at all).

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

#36

Post by Terretta »

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.

> amusing that they've decided to refer to this as masonry layout

They haven't decided this. Keep reading!

TL;DR:

Perhaps the best syntax could be grid-template-rows: none; to convey “please do not give me any rows”. Sadly, it’s too late to use this name, because none is the default value for grid-template-* and means “please give me only implicit rows, no explicit ones”.

Instead we could use the name off to convey “please turn off the grid in the row direction, and give me only columns”.

    grid-template-rows: off;
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”.

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

#37

Post by datascienced »

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…

Is this a sysvinit vs systemd rant?

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

#39

Post by [deleted] »

seumars wrote: post #11
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…

The whole point of this initiative is to stop using out of date float-hacks, or soon-to-be out of date hacks to CSS grid or flexbox. Firefox's masonry layout is in fact implemented in such a way that basically covers all layout cases by simply adding a new attribute that collapses grid rows.

[deleted]

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

#40

Post by baryphonic »

zarzavat wrote: post #12
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…

JavaScript is the final layout system. No declarative language can ever handle every use case. Fortunately I rarely need to resort to JS since grid came out. I’m not sure a constraint based system would do much good as it would sit awkwardly in the middle of grid and JS.

> No declarative language can ever handle every use case.

Prolog would beg to differ.

Post reply on HN