Hacker News Reader

Comment by mattbessey | Hacker News Reader

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

View on HN

Probably influenced by the most popular JavaScript library for achieving this type of layout, Masonry[0]. The author notes at the end of the article:

> But do expect the name of this value to change in the future. And perhaps prepare for a future where we call this “columnar grid” or “Grid Level 3” instead of “Masonry”.

[0] https://masonry.desandro.com/

I expect this is the case, if I had to describe that layout in iOS-land I'd also call it "masonry".

It's a pretty common descriptor in the Wordpress world - grids/scrapbooks will often have masonry as one of their layout styles. Maybe 100 years from now when people are browsing in their neurodisplay they'll be able to think "masonry" and have their photos tile the way they like, never having heard of Javascript or CSS in their lives. Language is neat like that.

It makes sense they'd pick this name, it refers to the jQuery plugin that was popular for doing this kind of layout back in the 2010s, so it's a convenient shorthand.

From a structural engineering point of view, this is because of the extra 1G of force keeping the rows together, but nothing keeps the columns together.

Since bricks have some tensile strength, but mortar (the 'glue' between rows and columns) has ~none, that means that, if you must have lines of weakness, you would prefer they be horizontal than vertical.

"masonry layout" is a term used for at least a decade[0] Pinterest is probably the most famous implementer of this layout

[0] https://www.sitepoint.com/understanding-masonry-layout/

Most infamous.

Maybe there should be a grid-template-masonry-direction? Just quickly surveying a couple of sites, "masonry" and "horizontal masonry" seem to be about equally common.

On the other hand horizontal masonry is constructed very differently: Flickr fits thumbnails into a row until it reaches some predefined total length, then scales everything down slightly so the total row width matches exactly (resulting in rows of different height). Deviantart does something similar, but shuffles the images for better fit so that the different row heights are barely perceptible.

Filling rows without any defined columns is more or less what flexbox already does.

But masons build floors like this all the time, and it is not an engineering disaster. That's the metaphor.

The reason you think it would be a disaster is the load of gravity against it, a concept they have not yet introduced into CSS, thankfully.

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

There's a CMS I use that has a photo search option. It loads in images in a column ordered masonry layout, which when you scroll down adds new images to the columns, so all the pictures move about and you've no idea where you are.

It's infuriating.

> 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 “please turn off the grid in the row direction, and give me only columns”.

    grid-template-rows: off;

But do expect the name of this value to change in the future. And perhaps prepare for a future where we call this “columnar grid” or “Grid Level 3” instead of “Masonry”.

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.

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

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.

I suppose I’m using brick by its informal definition as just a construction block.

https://en.m.wikipedia.org/wiki/Brick

But yes, historically brick meant just one type and style of material.

I associate masonry with the old ages, since this is one of the technologies you research in Civ games and back then I think people did have stones in non-standardized shapes and were just trying to fit things together. I'm not native English speaker, so I first heard this term from the games.

Yes, it has that association in English.

There's no gravity here, so the comparison makes no sense. In walls masonry construction produces sheer lines horizontally, an axis gravity is not bearing upon. This feels like taking the metaphor just a tad too literally.

I didn't think so, of you look at old stone walls, there's an absence of continuous horizontal or vertical patterns. (However the discussion was a fork, about wall building, so it was quite literal)

Surely they would not build like this. You want to avoid vertical shear planes.

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

I don't think of dry stone walls as masonry myself. I actually think that's the distinction between masonry and not-masonry!

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 think this is just transposed masonry, the wall looks ok if gravity is on the left. "Transposed" is redundant though, since I assume it will work in both grid-template-columns and grid-template-rows

Might be ok for a footpath?

Masonry layout is pretty common for streets, sidewalks, driveways, etc, at least in Brazil

If you read it to the end, you'll see their note on the name. That is also something they want up for debate.

Wonder if they'll add support for `masonry-arrangement: flemish-bond;`?

Thank you. I was confused as well.

A name for the inverse I suppose

Reply on news.ycombinator.com