Live data from Hacker News

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

webkit.org

141–150 of 359 posts

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

#141
post #3

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

By doing it in CSS you eliminate the need to re-render your DOM and make your JavaScript do more useful tasks, and make your website more resilient to scripts crashing, freezing, or being disabled by the user. Also, one would think that a pipeline of JavaScript + rendering engine falls short to a more direct solution, as browsers cheat by not using JavaScript ;)

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

#142
post #137

Earlier quoted context omitted.

[flagged]

It's often referred to as the masonry layout, so why not?

because every new construction requires a solid cornerstone? every archway a keystone? dont forget to put your boots in the trunk and your trunk in the boot. Nucular aluminum? I dunno

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

#143

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

Nothing that a transform(90deg) cannot solve :-). More seriously, what you describe is quite doable with flexbox (flex-direction: row, flex-wrap: wrap and flex-grow: 1). Interestingly, even the Masonry layout was already doable using a simple multi-column layout, the "only" issue is that instead of having the items left-to-right, top-to-bottom (ordered by row) you have them top-to-bottom, left-to-right (ordered by co…

There's a CMS I use that has a photo search option. It loads in images in a column ordered masonry layout, which when you scroll down adds new images to the columns, so all the pictures move about and you've no idea where you are.

It's infuriating.

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

#145
post #109
post #82

Earlier quoted context omitted.

Maybe you need better glasses. This proposal is coming from the Webkit team, ie. Apple. CSS is plenty comprehensible and using it gets better with every browser release as they are focused around yearly interoperability efforts.

AFAICT, practically nobody picks WebKit over Blink/Chromium for new projects. The reasons why Apple still maintains their own browser engine have to do with corporate prestige and expensive insurance policy. They can afford it because Apple is literally the world’s richest corporation. Nobody else does anymore. Even Microsoft gave up on their own browser engine despite having 97% market share two decades ago. And Moz…

Safari has 24% of the browser market.

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

#146

Earlier quoted context omitted.

It’s always funny to read people that just never understood CSS trying to convince everyone that CSS is impossible to understand!

Yes, that's fair. Sure, today we have grid and vanilla CSS is sane and useable by anyone who takes the time to learn the modern way of doing things. But let's not forget what a long and tortured road CSS has taken to become what it is today. CSS was a total dumpster fire up until around when flexbox came out. It was SO HARD to make it do what you want for SO LONG. The MOST BASIC NOTION of layout, putting things in a…

> I can't explain why it took CSS such a long time

It is weird to look back on but the web platform essentially went through a dark ages for a while. You could say the same about why it took us so long to get to ES6 JS, too. The standards bodies were frozen in ice (and I don’t quite know why either), everyone was debating HTML5 vs XHTML and somehow the rest of the platform floundered for years.

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

#147
post #123
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?

The question is, where do you draw the line? It's obviously not viable to implement literally every single design imaginable straight in CSS. If I want to do something silly like placing my content on the faces of a hypercube it wouldn't be realistic for me to expect that to be part of CSS. Having me write some JS is completely acceptable - that's what it is for, after all! It's not a matter of "would this be better…

I totally agree, and it does make sense to make adjustments that would make layouts more accessible. Mansonry-like layouts are common ("make it look like Pinterest") and so why not facilitate this entire class of use cases? The alternative is for everyone to either look for libraries or hax-together something that looks like Masonry but don't look too close and don't resize the view port too much.

Honestly, I'd say kudos to the WebKit folks for opening the discussion and being transparent about the process and the tradeoffs. It can certainly help refine (or inspire) future proposals.

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

#148

Earlier quoted context omitted.

I happen to quite like CSS (in comparison to any other layouting system out there), but I really wouldn't characterize it plenty comprehensible. I'm quite certain there's no human on earth that could reliably predict the outcome of most non-trivial real-life CSS layouts given just the code. And even though the situation has improved a lot, it's still common to have to use clearfixque hacks that definitely weren't env…

Isn’t that true for most software? Do you think you can simulate the outcome of a semi complicated Python Codebase just by looking at it? That’s just an intrinsic property of the problem you’re dealing with, adaptive page layout will always be complicated and not easily understandable just by looking at code.

I think I'd have a lot better shot with a semi-complicated Python codebase to be correct. Even with GUI stuff if using something like e.g. Qt box layouts.

Yes, CSS is a lot more powerful than those kinds of systems. Perhaps comparable to constraint satisfaction layouts that tend to be quite surprising.

But even so, there are so many settings and their combined behavior in CSS that it's, for me at least, totally infeasible to try to code much CSS "up-front" without constantly checking the result of the changes. And I don't mind it that much, but I'm quite certain that a more "predictable" equally powerful layouting system is entirely possible.

It could be an interesting challenge to show people some layouts and ask them to produce them using CSS without being able to iterate the results.

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

#149
post #43

Earlier quoted context omitted.

You can say that about almost any abstraction layer

The WPF has easy to use grids and layouts, a sane default styling yet is very to completely overhaul. CSS is a failure by design.

Yes, but that's a completely different point

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

#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 misunderstood that part since everyone seems to not be bothered by it at all here...

Post reply on HN