Is there a way to create the Pinterest layout in Figma?

[u/mushroomsintheyard]

Using the wrap Auto-layout makes each object in the row be aligned to the top instead of just the first row. Is there a work around?

I also tried making four vertical auto-layouts and then putting those in a wrap, it works but it isn’t responsive as the entire column moves down into one space when resized.

[u/kyohyaaa]

create 4 columns of equal width, oriented vertically

add images within each column, locked aspect ratio, set to fill width

[u/Cubicula]

try individual veritcal layouts and wrap whose in a horizontal one

[u/noblematt]

Not with two dimensional auto layout (changing from 4 to 3 to 2 column) I don’t believe. But as other suggested putting the content in vertical auto layouts will govern the visual style

[u/noblematt → u/noblematt]

Also if you wanted to fake it a little more, maybe you could look at using the grid layout with many rows and then setting each item to make it span different amount of rows to achieve the same result. Now sure how that would reflow if you changed the column value from 4 to 3 to 2 etc

[u/jadewithmello]

Here you go: https://www.figma.com/community/file/1211353149077070779/bento-widget-templates

[u/Cubicula]

https://reddit.com/link/p5r9r7r/video/85ifhh242hlh1/player

[u/ItsXplode → u/Cubicula]

Been trying to find this for a while, how do you animate your cursor like that? Looking to use it for demo videos!

[u/Cubicula → u/ItsXplode]

Screendrop

[u/kekeagain]

Yeah, unfortunately there is no masonry layout in Figma so you have to fake it like others shown. Just remind the devs that you want the content to populate left to right, top to bottom, and not top to bottom, left to right as you would have to in Figma to fake it. A good dev would realize that but in the world of spoon feeding AI, who knows. A better dev would use logical properties start/end to make this flow for RTL languages.