Public
- Public
- Network
- Groups
- Featured
- Popular
- People

Phanpy site, showing grid of media posts from #PixelArt hashtag timeline from mastodon.social. This time it's rendered with masonry layout, which also can auto-adjust the number of columns as the viewport width is resized.

Download link

Phanpy site, showing grid of media posts from #PixelArt hashtag timeline from mastodon.social. This time it's rendered with masonry layout, which also can auto-adjust the number of columns as the viewport width is resized.

Notices where this attachment appears

Embed this notice
Chee Aun 🤔 (cheeaun@mastodon.social)'s status on Monday, 30-Oct-2023 17:43:56 JST Chee Aun 🤔
in reply to

If there's native CSS masonry support in browsers, it would look like this. Only Safari Technology Preview supports it now https://caniuse.com/?search=masonry
Code looks like this:
```
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: masonry;
masonry-auto-flow: pack;
gap: 2px;
```
#PhanpySocialDev #Masonry #WebDev #CSSGrid #CSS

In conversation about a year ago from mastodon.social permalink