Live data from Hacker News

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

webkit.org

41–50 of 359 posts

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

#41

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

Might be ok for a footpath?

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

#42
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…

Nixos?

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

#43
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…

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.

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

#44
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…

It’s almost - almost! - as if the designers of Unix and of CSS work in completely different scenarios and with completely different constraints! Almost!

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

#45

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

> amusing that they've decided to refer to this as masonry layout They haven't decided this. Keep reading! TL;DR: Perhaps the best syntax could be grid-template-rows: none; to convey “please do not give me any rows”. Sadly, it’s too late to use this name, because none is the default value for grid-template-* and means “please give me only implicit rows, no explicit ones”. Instead we could use the name off to convey “…

This is creating a mode of grid where we say "it's not actually a grid" and is my biggest problem with this philosophically. It makes more sense to treat it as it's own display type, where the row/column targeting don't exist. It's not just that row targeting doesn't exist, it also makes no sense to target columns.

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

#46
post #8
post #3

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

You're asking "why render it correctly when we can render it wrong and then fix it afterwards".

An argument I would take more seriously if infinite scrolling was not a requirement too.

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

#47
post #35

I thought this kind of waterfall layout was cool and trendy a few years ago, but these days very few websites are doing it?

A big reason is because it's not possible on the web, and it's worth noting that the kind of visual you see in masonry demos is the most extreme example of what you could do with it. Most of the time it's: I want to fill a page with modules of differing heights where positionality is based on importance not coordinate, without weird gaps where items fall into the same row and constrain each other.

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

#48
post #18
post #11

Earlier quoted context omitted.

The whole point of this initiative is to stop using out of date float-hacks, or soon-to-be out of date hacks to CSS grid or flexbox. Firefox's masonry layout is in fact implemented in such a way that basically covers all layout cases by simply adding a new attribute that collapses grid rows.

>Firefox's masonry layout is in fact implemented in such a way that basically covers all layout cases That's good to know.

[deleted]

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

#49
post #35

I thought this kind of waterfall layout was cool and trendy a few years ago, but these days very few websites are doing it?

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.

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

#50
post #11
post #4

I am wondering whether it makes sense to keep adding more "layout" options to CSS, given that we have the legacy floats and then the modern flexbox and grid layout. If there are still cases that are not covered, perhaps a better solution to to have one final constraints-based system that covers all layout cases, even if it comes at the cost of complexity. The CSS frameworks and utility libraries will then be built on…

The whole point of this initiative is to stop using out of date float-hacks, or soon-to-be out of date hacks to CSS grid or flexbox. Firefox's masonry layout is in fact implemented in such a way that basically covers all layout cases by simply adding a new attribute that collapses grid rows.

> Firefox masonry... by simply adding a new attribute that collapses grid rows

Not just Firefox, the proposal here is

    grid-template-rows: off;
Post reply on HN