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

91–100 of 359 posts

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

#91

Post by jamincan »

ThatMedicIsASpy wrote: post #53

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

From what I can tell, the rules of masonry layout result in irregular sorting since, from what I can understand, it fills by row the highest available slot first, but the result visually appears as though it's sorted in columns. So if you resize your window, the order of your bookmarks would change.

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

#92

Post by KwanEsq »

Nice to see this getting some push and attention. I still remember seeing Mats Palmgren (seemingly?) single-handedly proposing/speccing and implementing this in Firefox a few years ago. Glad it hasn't just died because it was a Mozilla proposal/experiment (with proper experimental stage), instead of something Google just dumps on the web fait accompli.

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

#93

Post by cqqxo4zV46cp »

FartinMowler wrote: post #83
pavlov wrote: post #60

Earlier quoted context omitted.

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.

What would you propose instead that is comprehensible to visual designers, programmers, and document authors?

The inane and utterly incomprehensible toolset that they happen to be more familiar with, obviously. Some people take their ball and go home after they can’t work out how to centre a div, after decades of having “HTML and CSS are for the ‘stupid’ developers” drilled into them, and thinking that they can intuit it.

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

#94

Post by afavour »

pavlov wrote: post #85
afavour wrote: post #64

Earlier quoted context omitted.

I’m a web programmer and I find it comprehensible. Sure there are times I need to go to the docs but vast majority of the time I can work with it just fine. I’d agree that it probably is incomprehensible to many visual designers but unfortunately so is code in general. CSS is complex, especially these days, but I feel like those who don’t work with the web every day simply don’t get to experience it often enough to k…

It’s not a conspiracy. It’s a well-intentioned but poorly thought-out design for basic 1990s word processing layouts that accidentally blew up to describe entire application GUIs, and now it’s not in the interest of the stakeholders to try to do anything about it. It’s the same kind of growth pattern as government bureaucracies. Those are largely not conspiracies either, despite the occasional optics.

What you’re describing is the organic growth of a platform. The web is undeniably more complex than it was twenty years ago but needs are more complex too. Yes, the complexity does benefit major players but that isn’t the reason the complexity exists.

It’s ironic you’re saying that CSS is some form of vendor lock in. I have to imagine that if Google proposed a new layout engine for the web tomorrow they’d be roasted to kingdom come for their attempt at taking over the web.

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

#95

Post by mrighele »

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.

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 column) which is not what you want most of the times

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

#96

Post by wizzwizz4 »

mrighele wrote: post #86
mejutoco wrote: post #73

Earlier quoted context omitted.

What is the composable unix approach for layout/graphical interfaces?

Tcl/Tk ? When you had enough of using text as the single data structure in a shell, you can start doing the same with a GUI toolkit.

Tk has basically the same model as CSS, except that it's not strictly hierarchical. (Though CSS has that now, too: https://developer.mozilla.org/en-US/docs/Web/CSS/@scope)

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

#97

Post by greasyphalanges »

pavlov wrote: post #60
afavour wrote: post #44

Earlier quoted context omitted.

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.

I will concede to an argument that CSS exemplifies "design by committee" pejorative and is blighted by backward compatibility woes, but rest assured, it does its job as best as it can. Web development has patchworked its way out of most problems it has created, making it somewhat burdensome to learn. I'd say that is its Achilles's heel.

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

#98

Post by jampekka »

miunau wrote: post #82
pavlov wrote: post #60

Earlier quoted context omitted.

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.

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.

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 envisioned by the commitees.

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

#99

Post by camillomiller »

pavlov wrote: post #60
afavour wrote: post #44

Earlier quoted context omitted.

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.

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

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

#100

Post by slimebot80 »

Is there any examples of server-side rendering that pre-determines a masonary layout for the content?

Like: Given these images, and this window size, here's a calculated layout to make them all look nice...

I figure this would be more performant than any type of JS polyfill

Post reply on HN