Implementing a Pinterest-style Masonry Layout in Webstudio
Implementing a Pinterest-style Masonry Layout in Webstudio
At a glance
The community members discuss different approaches to implementing a Pinterest-style masonry layout in Webstudio. One suggestion is to use CSS grid and manually define the grid row for each item. Another option is to use a JavaScript library like Masonry.js, though this may negatively impact the Lighthouse score and cause page load issues. An external resource is mentioned, an article on CSS-Tricks that explores various approaches to a CSS masonry layout.
There is a discussion to add masonry layout into css. For now you can use css grid and manually define grid row on each item. Alternative is using some js script though it may negatively affect lighthouse score and jump on page load.
This is for portfolio galleries, comes up a lot for us on photography and content creation sites, so I'm using Masonry.js for now. Very difficu;t to use with content block
