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

181–190 of 359 posts

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

#181

Post by jampekka »

pavlov wrote: post #26
isodev wrote: post #20

Earlier quoted context omitted.

I'm no prophet and CSS, just like any other language has its quirks. And yeah, generally it is my job to try and tell computers what to do so I like powerful tools that let me do what i want :)

You’re missing the irony in the second paragraph. CSS proponents are ideologically opposed to simply telling the computer how to do what you want.

I agree that there should be an "escape hatch" to implement stuff that evaded the great wisdom of the commitees. The Houdini project may become such: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Houdini

But I do also see the benefit of a declarative system for most cases. Adaptive layouts are hard to do with imperative code, and very easily lead to e.g. infinite loops, so it's nice to work with a declarative system that guarantees a stable layout. That said, CSS is far from an ideal such system with so much ad-hoc and legacy baggage.

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

#182

Post by bazoom42 »

crispyambulance wrote: post #118
camillomiller wrote: post #99

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…

> The MOST BASIC NOTION of layout, putting things in a freaking grid, was missing from CSS for almost two decades

This is not true. CSS have had ‘display:table’ for 25 years, which is a simple grid layout model equivalent to html tables. Content can be aligned in rows and columns.

‘Display:grid’ is much more powerful of course.

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

#183

Post by SigmundurM »

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 wonder, what theoretical features could we have for a modular grid that'd be fundamentally incompatible with a columnar grid, and vice versa?

If adding columnar grids to CSS Grids doesn't make any features impossible, then I don't see why we shouldn't just have one CSS Grid standard, and thus always ensure feature parity between modular and columnar grids.

The argument being portrayed by Simmons, as I understand it, is that every feature that currently works for CSS Grid's modular grids, would also work for a columnar grid.

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

#184

Post by Turing_Machine »

paulddraper wrote: post #172
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…

Surely questioning the real world usefulness is not "toxic"? CSS is already very complicated. Adding more options needs proportionally strong justification.

No, but basing capabilities solely on what they imagine "well-known websites" might want is.

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

#185

Post by nightpool »

mvonballmo wrote: post #155
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…

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

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

Why? What's the downside to reusing grid-column-template or whatever for the CSS Masonry spec?

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

#187

Post by micromacrofoot »

phkahler wrote: post #178
PullJosh wrote: post #115

Earlier quoted context omitted.

As I understand it, the hard part of a masonry layout is ensuring that items are laid out with the first items near the top of the screen and the last items near the bottom of the screen. If you just plop your items into columns, the first items will all appear in the first column and the last items will all appear in the last column (left to right), which is not the behavior you want. To my knowledge, the correct be…

If people want to choose where things land they can do that. Therefore I assume we're talking about a scenario where the items are not known in advance - i.e. they come from a database query or similar. Is there no way to SELECT every Nth item when doing a query? Return a count and select where count MOD N = k? Dump those in a column. This feels like "I want my layout algorithm to be part of the standard." and if you…

> "I want my layout algorithm to be part of the standard."

I mean, yes... it's a very common layout algorithm so it gets standardized

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

#188

Post by hwbunny »

Webkit team snorting cocaine?

look at this, how intuitive, how readable:

grid-template-columns: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch;

just throw the whole grid thing out of the window and get on board someone who can create syntax that wouldn't send you to jump off a cliff and feels like it was made by a fellow human being, not an AI controlled robot.

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

#189

Post by SassyBird »

thousand_nights wrote: post #74
nkozyra wrote: post #49

Earlier quoted context omitted.

For awhile it was just described as "Pinterest style." It has some use cases but for the most part it's literally a wall of unstructed information. Difficult to parse and build any mental hierarchy. It's also ... incredibly easy to do with existing css.

> incredibly easy to do with existing css care to demonstrate? given a dynamic collection of images where you don't know the aspect ratios beforehand

Not the GP, but here is my website with photos with different aspect ratios. I used display:inline-block to achieve this result, effectively treating photos as text that needs to reflow.

https://yakubin.com/photography/albumless/

https://yakubin.com/photography/album/kenya-2023/

Proper masonry layouts which fill all available space in practice actually crop some images. Leaving space around photos is required when you don’t want cropping and want to preserve aspect ratio. That’s why I prefer my solution over what JS libraries for masonry layouts do.

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

#190

Post by micromacrofoot »

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…

the committee process is probably down to about 5ish years now? I feel like people who complain about this weren't around when the process was "20 years from now when we can drop IE support" — velocity has improved significantly
Post reply on HN