Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://mastodon.social/users/cheeaun/statuses/111307539144335484">Chee Aun 🤔 (cheeaun@mastodon.social)'s status on Monday, 30-Oct-2023 17:43:56 JST</a><a href="https://mastodon.social/@cheeaun" title="cheeaun@mastodon.social"><img src="https://gnusocial.jp/avatar/101551-48-20230315133326.webp" width="48" height="48" alt="Chee Aun 🤔" style="position: absolute; left: 0; top: 0;">Chee Aun 🤔</a><div><a href="https://mastodon.social/@cheeaun/111307058506284653" rel="in-reply-to">in reply to</a></div></section><article><p>If there's native CSS masonry support in browsers, it would look like this. Only Safari Technology Preview supports it now <a href="https://caniuse.com/?search=masonry" rel="nofollow noreferrer">https://caniuse.com/?search=masonry</a> </p><p>Code looks like this:</p><p>```<br>display: grid;<br>grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));<br>grid-template-rows: masonry;<br>masonry-auto-flow: pack;<br>gap: 2px;<br>```</p><p><a href="https://mastodon.social/tags/PhanpySocialDev" rel="tag">#PhanpySocialDev</a> <a href="https://mastodon.social/tags/Masonry" rel="tag">#Masonry</a> <a href="https://mastodon.social/tags/WebDev" rel="tag">#WebDev</a> <a href="https://mastodon.social/tags/CSSGrid" rel="tag">#CSSGrid</a> <a href="https://mastodon.social/tags/CSS" rel="tag">#CSS</a></p></article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/2252635#notice-4438381">In conversation</a><time datetime="2023-10-30T17:43:56+09:00" title="Monday, 30-Oct-2023 17:43:56 JST">Monday, 30-Oct-2023 17:43:56 JST</time> <span>from <span><a href="https://mastodon.social/@cheeaun/111307539144335484" rel="external" title="Sent from mastodon.social via ActivityPub">mastodon.social</a></span></span><a href="https://mastodon.social/@cheeaun/111307539144335484">permalink</a><h4>Attachments</h4><ol><li><label><a rel="external" href="https://gnusocial.jp/attachment/1736297">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.</a></label><br><video poster="" controls="controls"><source src="https://files.mastodon.social/media_attachments/files/111/307/538/677/091/333/original/3f56f26592b7c0fc.mp4" type="video/mp4"></source></video></li><li><article><header><div>No result found on File_thumbnail lookup.</div><h5><a href="https://caniuse.com/?search=masonry">"masonry" | Can I use... Support tables for HTML5, CSS3, etc</a></h5><div></div></header><div>"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.</div><footer></footer></article></li></ol></footer></blockquote>

Corresponding Notice

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 conversationMonday, 30-Oct-2023 17:43:56 JST from mastodon.socialpermalink
Attachments
1. 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.
2. No result found on File_thumbnail lookup.
  "masonry" | Can I use... Support tables for HTML5, CSS3, etc
  "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

Public

Embed Notice

HTML Code

Corresponding Notice