331–340 of 359 posts
Earlier quoted context omitted.
That's just a random demo. It's not particularly relevant for the concept they're trying to gather feedback on
The demos should be motivating the feature. A bad demo is destructive to that effort. This is a very bad demo.
Earlier quoted context omitted.
Masonry just refers to working with bricks. It's old as time but we still make stuff out of bricks and you can still be a mason today. https://en.wikipedia.org/wiki/Masonry
It seems your are saying it is only relates to bricks? But it's not, it's any stone, cut or formed.
Also, I think the need for masonry is vastly overestimated or perhaps not fully researched. It is presented/implied to be a common need but it isn't. Check the top 100 websites, check your personal top 20 websites, how many use masonry? I bet not that many, it's niche use case which also has plenty of usable alternatives. It also never even shows up in any developer surveys.
Anyway, if we're into the game of building very specific layout solutions into CSS itself now, I'd argue the layout as seen on Google Image search is the far more useful one. It is somewhat of a horizontal masonry, but not really. Each image must keep its original aspect ratio (no cropping) whilst all images on the same row have the same height, thus filling the vertical space of the row fully. At the same time, rows must be roughly of the same height. There can be no gaps at the end of a row nor at the last row.
Quite hard to implement, although there's articles describing how.
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…
Earlier quoted context omitted.
It’s difficult to unambiguously and usefully specify what should happen when not all constraint can be fulfilled. And you can likely also DOS browsers by exponentially exploding constraint calculations. CSS is bad as a layout system, but I also don’t like constrained-based layout systems unless they enforce that the constraints can always be fulfilled and be calculated in reasonable time. Which implies that you would…
Checking that the layout isn‘t exponentially complex and DOSing the browser could be a simple task for the web developer. If you want your website to perform bad you can always find a way.
Earlier quoted context omitted.
Why would you feel shitty about using ‘display:table’? It puts things into a freaking grid as you asked for.
There was a huge cargo cult adamantly against using tables back in the day, even though the "true way" of hacking divs with float and clearfixes and invisible images was totally broken. Somehow having bunch of wrapper and empty divs was "more semantic" or something. I was in the cult. It was totally inane, but seems to carry some effects to this day.
Earlier quoted context omitted.
I think, in structural engineering terms, it refers to old natural stone wall [0] construction methods. Some bridges around me are made like this, and they're over a thousand years old. But I agree that it's not a good adjective because I had the exact same first thought. Both "natural" and "stonewall" would be better, and they're not great names either. [0] https://duckduckgo.com/?q=natural%20stone%20walls&ko=-1&iax…
"Dry stack" is another term for that, a stone wall without mortar. In my opinion, thinking of this as a grid is misguided. It's barely different than flex columns. I would want to be able to have some objects take up more width than one column, or not have clean columns at all. Like "space filling" and "mosaic".
But anyway, I think the second last section on the link, the part that addresses the wrongness of the name, would align with your opinion.
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.
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…
In a magazine-style layout, wouldn't you read the columns top-to-bottom first, then left-to-right? You can accomplish that already in CSS with either 'columns' or vertical flexbox.
Another issue with this 'masonry' layout is the ragged edge at the bottom. In a magazine that would presumably be justified -- again something you can do with columns or flex.
On the web, I guess there's a hidden assumption that you'll have endless scrolling content, so it doesn't matter what the bottom of the page looks like? If so, that's not necessarily something that should be encouraged.
Earlier quoted context omitted.
The examples in the article seem to have CSS that directly sizes the columns, albeit with some flexibility such as being able to change the number of columns to better fit the width. It seems like the item widths depend on the column widths, rather than the other way around (which seems like it'd be circular). What's an example where the column widths depend on the items?
If you have something like: columns: 1fr auto max-content 1 somethingsuperlong something else You first need to decide how big each of the three columns are going to be, then you want to place the items in each of the columns. Depending on the non-fixed column type (there are different rules for each type) you want to ensure their constraints are satified (typeically they are big enough to encompass the items).