> 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.
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”.
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.
> Accidentally, seems harder. It kinda smells for people to intentionally make it not popular by actively working against fame, or something like that..
It's not harder; it's the only thing that works for tools. Tools cannot be good for long because of marketing. Marketing is the thin layer of paint over the Ferrari. Very nice paint, but if the car doesn't work or go very fast very quickly then that's that.
because every new construction requires a solid cornerstone? every archway a keystone? dont forget to put your boots in the trunk and your trunk in the boot. Nucular aluminum? I dunno
I've never had a case where I didn't know the reason or mechanism by which an element would be hidden. In my code, I use the `hidden` property. In that case it simplifies from
$(el).is(':hidden')
to
el.hidden
It's not quite as succint as your jquery, but you also could have written this.
jQuery has a fluent interface and often shorter/smaller/more convenient APIs on top of that.
DOM APIs are quite literally 90s era Java-style APIs.
While DOM APIs have pulled in a few niceties over the years, some of them are really anemic (e.g. querySelectorAll does not return a proper Array-like object). Worse is combining them. Almost every API is a single-shot tedious step-by-step chore.
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.
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.
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.
> 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.
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.
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)
"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 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
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.