DEV Community

Cover image for CSS Trivia: Masonry Grid Layout

CSS Trivia: Masonry Grid Layout

Dalia on January 14, 2024

Pinterest's layout has always been the defining feature of the site since its inception. It has been used by many others since then, and I've alway...
Collapse
 
jonrandy profile image
Jon Randy 🎖️

Never understood why anyone thought this layout was a good idea. Really difficult to scan with your eyes

Collapse
 
leob profile image
leob

I think this in the vein of "sometimes we just want something which isn't really functional, but which looks cool" ;-)

Collapse
 
irrelevantspace profile image
Dalia

Absolutely. Also why does this sound like the motivation behind every side project I work on :D

Collapse
 
irrelevantspace profile image
Dalia

I find it quite visually appealing, but you make a very good point. I'd think the amount and type of data presented need to be considered when choosing such a layout.

Do you think a horizontal masonry layout (e.g. Google Images) is easier to scan or is the same?

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Horizontal works much better

Collapse
 
solfkwolf profile image
solfKwolf

Because some people want to see more cards at once and pick something they're interested in

Collapse
 
dev_geos profile image
Dev Geos

This one can be made easily with flexbox or not ?
I will try it

Collapse
 
irrelevantspace profile image
Dalia

It can if you don't mind vertical ordering of the items and I think you'd need a fixed height layout, but that's only if you're making a vertical (Pinterest style) layout. Let me know if you end up trying it!

Collapse
 
dev_geos profile image
Dev Geos

I think too. I will tell you after

Collapse
 
lesliele profile image
leslie_kai

cool