Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://front-end.social/users/jensimmons/statuses/112254586399374535">Jen Simmons (jensimmons@front-end.social)'s status on Friday, 12-Apr-2024 06:15:34 JST</a><a href="https://front-end.social/@jensimmons" title="jensimmons@front-end.social"><img src="https://gnusocial.jp/avatar/42991-48-20221129215943.webp" width="48" height="48" alt="Jen Simmons" style="position: absolute; left: 0; top: 0;">Jen Simmons</a></section><article><p>I’ve been making demos of CSS Grid level 3 lately, to show off what putting masonry/waterfall-like layout support in CSS Grid can do. (I’ve got 16 demos and counting!)</p><p>Here’s one with that includes View Transitions, running in Safari Technology Preview 192. </p><p>What do you want to know about how masonry-like layouts could work in CSS Grid?</p></article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/2925968#notice-5821844">In conversation</a><time datetime="2024-04-12T06:15:34+09:00" title="Friday, 12-Apr-2024 06:15:34 JST">about 8 months ago</time> <span>from <span><a href="https://front-end.social/@jensimmons/112254586399374535" rel="external" title="Sent from front-end.social via ActivityPub">front-end.social</a></span></span><a href="https://front-end.social/@jensimmons/112254586399374535">permalink</a><h4>Attachments</h4><ol><li><label><a rel="external" href="https://gnusocial.jp/attachment/2489749">a collection of photos — all different shapes and sizes, laid out in a puzzle-like pattern. A mouse moves over one image. Click. And the image grows bigger. The rest animate to scoot out of the way to make space. Click again, and the image gets smaller, while all the rest scoot back to where they started.</a></label><br><video poster="" controls="controls"><source src="https://cdn.masto.host/frontendsocial/media_attachments/files/112/254/570/902/434/574/original/590785e62648c8db.mp4" type="video/mp4"></source></video></li></ol></footer></blockquote>

Corresponding Notice

Embed this notice
Jen Simmons (jensimmons@front-end.social)'s status on Friday, 12-Apr-2024 06:15:34 JST Jen Simmons
I’ve been making demos of CSS Grid level 3 lately, to show off what putting masonry/waterfall-like layout support in CSS Grid can do. (I’ve got 16 demos and counting!)
Here’s one with that includes View Transitions, running in Safari Technology Preview 192.
What do you want to know about how masonry-like layouts could work in CSS Grid?
In conversationabout 8 months ago from front-end.socialpermalink
Attachments
1. a collection of photos — all different shapes and sizes, laid out in a puzzle-like pattern. A mouse moves over one image. Click. And the image grows bigger. The rest animate to scoot out of the way to make space. Click again, and the image gets smaller, while all the rest scoot back to where they started.

Public

Embed Notice

HTML Code

Corresponding Notice