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

51–60 of 359 posts

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

#51

Post by sebzim4500 »

rezonant wrote: post #34
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).

I would expect most browsers that aren't running JS do not properly handle state of the art CSS extensions.

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

#52

Post by alpaca128 »

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…

Did the designers of Unix also have to ensure compatibility with billions of devices connected worldwide running different software stacks?

Also as mentioned in the linked article the masonry layout is already possible with JS, no decades-long committee process needed. It's just about standardizing something frequently used.

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

#53

Post by ThatMedicIsASpy »

I already use this. On Firefox I just enable it in the options and make use of it for my bookmarks. On Mobile this isn't an issue since it's just stacked on top of each other (no about:config on mobile).

The last image has it turned off.

https://imgur.com/a/o7OyZEW

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

#54

Post by georgesimon »

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.

I think, in structural engineering terms, it refers to old natural stone wall [0] construction methods. Some bridges around me are made like this, and they're over a thousand years old.

But I agree that it's not a good adjective because I had the exact same first thought. Both "natural" and "stonewall" would be better, and they're not great names either.

[0]https://duckduckgo.com/?q=natural%20stone%20walls&ko=-1&iax=...

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

#55

Post by klabb3 »

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…

CSS may be complex, but you get a huge bang for the buck in terms of UX, rendering performance, flexibility, accessibility, compared to most drawing and layout systems. You could argue against border-radius and flex as well, but Im glad we’re past clearfix and gifs for corners. Does masonry layout qualify for becoming standard? I don’t know.

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

#56

Post by exyi »

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.

I think this is just transposed masonry, the wall looks ok if gravity is on the left. "Transposed" is redundant though, since I assume it will work in both grid-template-columns and grid-template-rows

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

#58

Post by rezonant »

sebzim4500 wrote: post #51
rezonant wrote: post #34

Earlier quoted context omitted.

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).

I would expect most browsers that aren't running JS do not properly handle state of the art CSS extensions.

Such browsers can also get by based on the semantic ordering of content within the document, which will more closely match the visual reality when a masonry type layout is used. The alternative of defining several columns leads to at least one column being shoved all the way at the end of the document after the previous column, whereas in a masonry layout that wouldn't be the case.

This is where a proper solution to this problem shines: After all, when you are on mobile (at least 60% of your users), they will get a single column anyway. Any solution that doesn't solve for them is a nonstarter.

That being said, it is the slow loading of JS and the folks using truly modern browsers with JS turned off that are more common, and for those people this isn't a problem.

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

#59

Post by HPsquared »

georgesimon wrote: post #54
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.

I think, in structural engineering terms, it refers to old natural stone wall [0] construction methods. Some bridges around me are made like this, and they're over a thousand years old. But I agree that it's not a good adjective because I had the exact same first thought. Both "natural" and "stonewall" would be better, and they're not great names either. [0] https://duckduckgo.com/?q=natural%20stone%20walls&ko=-1&iax…

Surely they would not build like this. You want to avoid vertical shear planes.

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

#60

Post by pavlov »

afavour wrote: post #44
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…

It’s almost - almost! - as if the designers of Unix and of CSS work in completely different scenarios and with completely different constraints! Almost!

And with this convenient domain excuse, CSS has managed to become a system that’s not a fit for any domain.

It’s incomprehensible to visual designers, incomprehensible to programmers, and incomprehensible to document authors.

On the upside, it provides a massive moat of sunk cost and implicit implementation dependency around Chromium, so at least there’s that.

Post reply on HN