Live data from Hacker News

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

webkit.org

151–160 of 359 posts

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

#151
post #145
post #109

Earlier quoted context omitted.

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.

Not on merit but simply by being the only allowed option on iOS. Nobody chooses Safari because it runs WebKit instead of Blink.

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

#152

"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…

And honestly, that's a ridiculous claim. Two very popular websites I can think of right away are Pinterest and VSCO. (Perhaps VSCO on the web isn't as popular as the mobile app, but the company continues to use masonry as the design evolves.)

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

#153

Earlier quoted context omitted.

> No declarative language can ever handle every use case. Prolog would beg to differ.

Prolog has well-defined execution order with side-effects. It's an imperative language masquerading as a declarative one.

MiniKanren, then?

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

#154

"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…

[deleted]

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

#155

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…

A "row-less" grid fits very well in the current CSS Grid specification, in that it can reuse the very powerful column-definition property as well as sub-grids. Their examples very convincingly show how orthogonal these features are.

Mostly, you just write grid-row-template: masonry and everything else just works with it. This is nice. It doesn't become harder to use the grid layout than it already is IMHO.

The drawback is mostly for browser-engine authors, for whom the bar for "fully supports CSS Grid" will be set even higher. They also mention that it might avoid "performance traps" where an implementation that needs to support all features of grid might be slower at some parts of grid layout than it would be if the specification were simpler.

If there were a separate display mode, then you'd have to repeat the grid-column specification for the masonry layout, which seems a shame.

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

#156
I really like the general look and feel of masonry/waterfall layout, maybe it's because I grew up reading physical newspapers (and still do), but to me a columnar layout is just an intuitive way to divide up a page.

I just wish there was an alternative to the default masonry ordering, which afaik is a simple rule that goes sth like 'place the next item in whichever column it can go up highest'. This means that the left-to-right order is really juggled from the second row onwards. What I imagine would be really nice is if there was a layout that preserves more of the left-to-right (or right-to-left, if that's your preferred direction) reading flow. Something like 'put the next item one column to the right of the previous item (or in the leftmost, if you were at the rightmost), unless you can put a second item in the same column without the new bottom going too far below the bottom border of the column to its left'. This would be more flexible than strictly going left-to-right (which would also mess up alignment) and would reatin some meaning of the left-to-right reading direction.

I know it won't be possible to accommodate every possible formula one could prefer for masonry, but if you have content where the ordering matters at least a bit (maybe not for Pinterest, but for a journal eg it would), then I really think sth like this would be a more sensible default than the classic masonry rule.

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

#157

Earlier quoted context omitted.

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.

Microsoft failed to capture the internet. IE6 can still cause sane minds to crack.

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

#158

Earlier quoted context omitted.

> No declarative language can ever handle every use case. Prolog would beg to differ.

And CSS https://accodeing.com/blog/2015/css3-proven-to-be-turing-com...

This research is cool, but I always feel it needs an asterisk. Requiring a click or event or some external clock feels like a cop out. I've seen a similar thing with PowerPoint.

It would be a bit like saying a language with iterations but neither first-class functions nor recursion is Turing complete as long as an external stack is provided. Or maybe it allows a stack (or recursion) but requires external intervention for function application.

Cool hacking nevertheless.

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

#159
post #156

I really like the general look and feel of masonry/waterfall layout, maybe it's because I grew up reading physical newspapers (and still do), but to me a columnar layout is just an intuitive way to divide up a page. I just wish there was an alternative to the default masonry ordering, which afaik is a simple rule that goes sth like 'place the next item in whichever column it can go up highest'. This means that the le…

something like:

    {
       /* Move element a maximum of 2 columns left or right on update */
       grid-template-max-horizontal-shift: 2 col;
    }

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

#160

"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…

> Would it instead be possible to exclude anyone with that attitude from a discussion about an open standard?

That attitude is rather critical and important to the discussion.

I don't think it's the browser, or the standards bodies, responsibility to have built-in support for every possible feature we can imagine. Instead, the standards need to be simple and extensible so that that libraries (Javascript or WASM) can do creative layouts. (IE, instead of waiting for Masonry layout in CSS, you should be able to grab a Masonry layout library and include it with your web site.)

Otherwise, we're building a system where the standards (CSS in this case) are so complicated that it's getting harder and harder to implement the standards; and are too inflexible to support what tomorrows' developers can imagine.

Post reply on HN