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

201–210 of 359 posts

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

#201

Post by qingcharles »

achairapart wrote: post #116

So, the background story is that CSSWG DevRels from browser vendors are debating how to formally include the Masonry layout into CSS, at least since 2020, when Firefox first proposed it. The news here is that people at WebKit decided to push the debate to the public, inviting designers and developers to take some action (“post to social media, write blog posts”), in order to get past this. While it may look just like…

It's great they're doing this. I've been nudging everyone involved with this since last year. The Chrome guys are the furthest behind (no support). FF has flag support.

I've been testing it since last year on FF and Safari and have no complaints about their implementations. I know some people are sniffling about the placement and naming of the properties. You have to be pragmatic about it, though, and realize there probably isn't a perfect solution and just implement it.

I refuse to use JavaScript for the fallback, so the fallback is a lot of ugly CSS that doesn't order things in the right way, but it doesn't make a big deal of trouble for the project I'm working on. Most people will fallback to JavaScript right now, though, and when JavaScript is your solution to layout then you're already on a loser.

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

#202

Post by troupo »

Unai wrote: post #175

I really don't like how disingenuous, propagandistic and patronising Simmons is being in this article. Ending each section saying "all this will be impossible if not done the way I like", which is absolutely not true. There's not one reason why anything that can be done in "display: grid" couldn't be done with "display: masonry". But I think, and I hope, that people aren't the fools she's taking us for, and can see h…

> I really don't like how disingenuous, propagandistic and patronising Simmons is being in this article. Ending each section saying "all this will be impossible if not done the way I like"

This is a very uncharitable way of reading this, and that's a polite way of describing this view.

She shows what is possible, and how existing grid mechanisms can be leveraged for masonry layout. It's implicit that coming up with a proposal outside the grid would need to accommodate the same capabilities somehow.

How is it patronising or disingenuous? They (and Firefox) literally implemented this and are showing what is possible. And are asking you for input. If you think you're incorrect, you can join and show them the error of their ways:

--- start quote ---

Our hope is that web designers and developers chime in (post to social media, write blog posts) with your thoughts about which direction CSS should take.

Some people, including those of us at Apple, like having “Masonry” be part of CSS Grid. We believe this functionality is a mechanism to expand CSS Grid — allowing it to finally create columnar grids as well as modular grids. And we want this functionality to be mixed with all the other features of Grid, including the powerful options for defining a columns, track spanning, explicit placement, and subgrid.

Other people instead believe Masonry should be its own separate display type. At first glance, defining Masonry with a new display type might make a lot of sense. You do get a tidy separation between layout types.

--- end quote ---

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

#203

Post by treflop »

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…

Masonry just refers to working with bricks. It's old as time but we still make stuff out of bricks and you can still be a mason today.

https://en.wikipedia.org/wiki/Masonry

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

#204

Post by paulhilbert »

bezbac wrote: post #164
paulhilbert wrote: post #150

"Others are questioning whether or not this kind of layout is needed on the web at all — they aren’t sure that well-known websites will use it." Would it instead be possible to exclude anyone with that attitude from a discussion about an open standard? I know this sounds toxic, but I would argue that approaching public design this way is ultimately more toxic wrt the outcome and those affected by it. Or maybe I misun…

I can totally understand the quoted comment. I mean, we are talking about CSS as a language here. Anything that is formalized is expected to be implemented and supported by browser engines and vendors. Browser engines are already extremely complex, so it's fair to think closely about formalizing new things when it's not apparent that there is a big enough need. I'm not claiming this is the case with the Mansory layou…

I totally get that. But for me there is a fundamental difference between "big enough need" and "well known websites need this".

How are potentially thousands of niche websites less of an argument than "instagram and co don't need it"?

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

#205

Post by klabb3 »

blackbear_ wrote: post #84
klabb3 wrote: post #55

Earlier quoted context omitted.

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.

> compared to most drawing and layout systems This is just an accident of history and not because CSS has anything that makes it intrinsically better than the alternatives.

Accumulated garbage for backwards compatibility? Let him who is without sin cast the first stone.

I’m not saying css is intrinsically better (what does intrinsic even mean in this case?). It’s pragmatically better than anything else I’ve seen. It’s dead simple to learn and use, and (almost) fully declarative, and degrades gracefully. Just show me a better alternative and I’ll change my mind.

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

#206

Post by pphysch »

turboat wrote: post #193

Suppose we could create a backwards-incompatible system to replace CSS. How would we do it? Are there any books or papers on how to create a coherent layout system? What about alternatives like Qt, Tk, SwiftUI, etc.? I've never used anything besides CSS. Are any of the actually-implemented systems in the wild better? If so, what makes them better? I want a system that provides a better interface for developers, but h…

CSS is overall pretty great and I've seen at least a couple non-web GUIs rip out their bespoke GUI systems and replace them with CSS or something very much like it.

I think the big change will be better support for hierarchical definitions, including but not limited to nesting. TFA discussion would be pretty moot if there were namespaced properties that could somehow fit under display: masonry; rather than polluting the global namespace.

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

#207

Post by paulhilbert »

PurpleRamen wrote: post #171
paulhilbert wrote: post #150

"Others are questioning whether or not this kind of layout is needed on the web at all — they aren’t sure that well-known websites will use it." Would it instead be possible to exclude anyone with that attitude from a discussion about an open standard? I know this sounds toxic, but I would argue that approaching public design this way is ultimately more toxic wrt the outcome and those affected by it. Or maybe I misun…

Why? Any feature is a liability, so it's good to question whether a feature has to be implemented, and whether it should be in this way and position, or maybe somewhere else.

Where is the connection to "well-known websites"?

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

#208

Post by paulhilbert »

cornstalks wrote: post #168
paulhilbert wrote: post #150

"Others are questioning whether or not this kind of layout is needed on the web at all — they aren’t sure that well-known websites will use it." Would it instead be possible to exclude anyone with that attitude from a discussion about an open standard? I know this sounds toxic, but I would argue that approaching public design this way is ultimately more toxic wrt the outcome and those affected by it. Or maybe I misun…

Questioning whether something new is actually needed is absolutely worth doing, so long as it’s done respectfully. This is a standard that affects billions of people and many implementations. It’s great to ask if something is really needed or if it’s just adding bloat. We shouldn’t just grow the standard without first asking if the growth and added complexity carry their own weight. If someone proposing something can…

Again: when did "well-known websites use this" become the motivating factor behind standard design?

The blink tag was used by well-known website and it's universally recognized as a bad decision.

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

#209

Post by mch82 »

turboat wrote: post #193

Suppose we could create a backwards-incompatible system to replace CSS. How would we do it? Are there any books or papers on how to create a coherent layout system? What about alternatives like Qt, Tk, SwiftUI, etc.? I've never used anything besides CSS. Are any of the actually-implemented systems in the wild better? If so, what makes them better? I want a system that provides a better interface for developers, but h…

Constraint-based layout using the Cassowary algorithm seemed like a popular alternative for a while (see https://github.com/slightlyoff/cassowary.js/?tab=readme-ov-f...). It’s designed to solve for variance in screen size and shape. Apple switched to Swift UI and may have moved on from this approach.

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

#210

Post by legulere »

turboat wrote: post #193

Suppose we could create a backwards-incompatible system to replace CSS. How would we do it? Are there any books or papers on how to create a coherent layout system? What about alternatives like Qt, Tk, SwiftUI, etc.? I've never used anything besides CSS. Are any of the actually-implemented systems in the wild better? If so, what makes them better? I want a system that provides a better interface for developers, but h…

I think one classic book about it is "Rastersysteme für die visuelle Gestaltung - Grid systems in Graphic Design". Never read it though.
Post reply on HN