Masonry grid layout?

Is it possible to build a masonry grid layout directly through available weweb tools? I have a collection of few hundreds items which are mainly images with different ratios that I’m hoping to display in masonry grid type of layout.

Yes and there are two choices depending on how important is the order of your images.

First one is having a column layout horizontally, and in each one of the columns you will have a flexbox that will arrange the images vertically. As said, with this it will be a bit difficult to properly order your images as the natural order will be:
1 - 4 - 7
2 - 5 - 8
3 - 6 - 9

Other option is to use position: absolute on all elements inside a container and then place them by binding the transform style to translate(x,y). A good example of this would be Pinterest

1 Like

awesome to hear that it’s possible! Thanks, I’ll give it a try.

Interesting, is there a tutorial for this or some more info how to create this is weweb with screenshots?

Hi there :wave:

Thought I’d share @jptrinh’s tutorial on how to build a masonry grid layout here.

1 Like