{"id":1833,"date":"2024-04-24T14:40:14","date_gmt":"2024-04-24T20:40:14","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1833"},"modified":"2024-05-10T07:10:39","modified_gmt":"2024-05-10T13:10:39","slug":"feedback-on-masonry-layout","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/feedback-on-masonry-layout\/","title":{"rendered":"Feedback on Masonry Layout"},"content":{"rendered":"\n

Jen Simmons posted Help us invent CSS Grid Level 3, aka \u201cMasonry\u201d layout<\/a> over on the WebKit blog the other day and is actively soliciting feedback. <\/p>\n\n\n\n

\n

Our hope is that web designers and developers chime in (post to social media, write blog posts) with your thoughts about which direction CSS should take.<\/p>\n<\/blockquote>\n\n\n\n

Don’t mind if I do.<\/p>\n\n\n\n

Do we need Masonry Layout at all?<\/h2>\n\n\n\n

Jen writes:<\/p>\n\n\n\n

\n

Others are questioning whether or not this kind of layout is needed on the web at all \u2014 they aren\u2019t sure that well-known websites will use it.<\/p>\n<\/blockquote>\n\n\n\n

I think people will use it. It can be a compelling way to lay out blocks of content. For “image galleries” alone I feel like it’s worth having a good solution for. To name the most notorious example, this type of layout has been an iconic part of the Pinterest branding since forever. How’s that for a well-known website? I’d love to see the day the actual pinterest.com<\/code> uses a native web platform masonry.<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

There are lots of things on the web that have naturally different aspect ratios, like images and Card components with arbitrary content. A “normal” grid layout with perfectly horizontal grid row lines isn’t always a good fit. Here’s an example of a reviews website where the reviews are of different sizes, and a masonry look works well:<\/p>\n\n\n\n\t\t

\n\t\t\t