Christian PufferNov 1, 2024
Nicolas Hoizey

“Should masonry be part of CSS grid?” by @shadeed9

🔗 https://ishadeed.com/article/css-grid-masonry/

> An exploration of examples showing masonry as both a part of CSS Grid and as its own display type.

Ahmad provides compeling use cases and code examples showing that making masonry layout “just” a specific use case for CSS Grid could be the best choice.

So… that's not what I thought a month ago… 😅

Anyway, the most important part in…

#CSS #Grid #Masonry

⚓️ https://nicolas-hoizey.com/links/2024/10/31/should-masonry-be-part-of-css-grid/

Should masonry be part of CSS grid?

An exploration of examples showing masonry as both a part of CSS Grid and as its own display type.

Nov 1, 2024 at 2:12amWeb
Show threadAhmad ShadeedNov 1, 2024

@nhoizey thanks for sharing the article.

Re: why would anyone use masonry for the footer, or the FAQ?

The thing here is that masonry isn't the default layout. The footer is a grid of multiple columns built with mimax(). When there is no enough space, the last column will wrap to the next line.

Without using masonry, there is an uneven space on the right side. With masonry, the column is added to where it fits as per the browser. I like that more.

Attached are screenshots.

Show threadNicolas HoizeyNov 1, 2024

@shadeed9 let’s agree to disagree! 😅

I personally don’t like to have this column moved there.

Like for the FAQ, I feel there is a reading order, which is disturbed by masonry layout.

Show threadAhmad ShadeedNov 1, 2024

@nhoizey It’s totally fine! As those are design decisions and can vary based on the context.

The goal here is demonstrate building that behavior/design with the two options (grid-integrated vs grid independent).

Show threadNicolas HoizeyNov 1, 2024
@shadeed9 and your demonstrations are perfect, once again! 👍