13 ms·

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

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

deleted 2y ago
[deleted]
cfj 2y ago
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/ https://masonry.desandro.com/
- joenot443 2y ago
  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.
rezonant 2y ago
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.
627467 2y ago
"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/ https://www.sitepoint.com/understanding-masonry-layout/
- account42 2y ago
  Most infamous.
Terretta 2y ago
> 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”.
- rezonant 2y ago
  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.
datascienced 2y ago
Might be ok for a footpath?
- FalconSensei 2y ago
  Masonry layout is pretty common for streets, sidewalks, driveways, etc, at least in Brazil
georgesimon 2y ago
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=images&ia=images https://duckduckgo.com/?q=natural%20stone%20walls&ko=-1&iax=...
- rezonant 2y ago
  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.
  - georgesimon 2y ago
    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)
- HPsquared 2y ago
  Surely they would not build like this. You want to avoid vertical shear planes.
- mewpmewp2 2y ago
  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.
  - georgesimon 2y ago
    Yes, it has that association in English.
wongarsu 2y ago
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.
- chuckadams 2y ago
  Filling rows without any defined columns is more or less what flexbox already does.
exyi 2y ago
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
dkdbejwi383 2y ago
Wonder if they'll add support for `masonry-arrangement: flemish-bond;`?
wildpeaks 2y ago
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.
- lloydatkinson 2y ago
  [flagged]
  - sausajez 2y ago
    Accidentally? How can something be intentionally/ unintentionally popular?
    - PurpleRamen 2y ago
      Marketing makes something intentionally popular. Accidentally, seems harder. It kinda smells for people to intentionally make it not popular by actively working against fame, or something like that..
      - deleted 2y ago
        [deleted]
      - robertlagrant 2y ago
        > 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.
  - kreetx 2y ago
    It's often referred to as the masonry layout, so why not?
    - 2y ago
londons_explore 2y ago
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.
mrighele 2y ago
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
- hennell 2y ago
  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.
paulddraper 2y ago
Thank you. I was confused as well. A name for the inverse I suppose
Menu_Overview 2y ago
If you read it to the end, you'll see their note on the name. That is also something they want up for debate.

deleted 2y ago

[deleted]

cfj 2y ago

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/ https://masonry.desandro.com/

joenot443 2y ago
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.

rezonant 2y ago

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.

627467 2y ago

"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/ https://www.sitepoint.com/understanding-masonry-layout/

account42 2y ago
Most infamous.

Terretta 2y ago

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

rezonant 2y ago
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.

datascienced 2y ago

Might be ok for a footpath?

FalconSensei 2y ago
Masonry layout is pretty common for streets, sidewalks, driveways, etc, at least in Brazil

georgesimon 2y ago

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=images&ia=images https://duckduckgo.com/?q=natural%20stone%20walls&ko=-1&iax=...

rezonant 2y ago
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.
- georgesimon 2y ago
  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)
HPsquared 2y ago
Surely they would not build like this. You want to avoid vertical shear planes.
mewpmewp2 2y ago
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.
- georgesimon 2y ago
  Yes, it has that association in English.

wongarsu 2y ago

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.

chuckadams 2y ago
Filling rows without any defined columns is more or less what flexbox already does.

exyi 2y ago

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

dkdbejwi383 2y ago

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

wildpeaks 2y ago

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.

lloydatkinson 2y ago
[flagged]
- sausajez 2y ago
  Accidentally? How can something be intentionally/ unintentionally popular?
  - PurpleRamen 2y ago
    Marketing makes something intentionally popular. Accidentally, seems harder. It kinda smells for people to intentionally make it not popular by actively working against fame, or something like that..
    - deleted 2y ago
      [deleted]
    - robertlagrant 2y ago
      > 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.
- kreetx 2y ago
  It's often referred to as the masonry layout, so why not?
  - 2y ago

londons_explore 2y ago

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.

mrighele 2y ago

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

hennell 2y ago
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.

paulddraper 2y ago

Thank you. I was confused as well. A name for the inverse I suppose

Menu_Overview 2y ago

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