Masonry help

VoidlessSeven7

New member
Local time
03:21
Joined
Nov 20, 2019
Messages
4

Hi, I’m currently designing a website that has 20 images loaded, but they are on a single column so it takes a lot of vertical space and not horizontal space. I would like to create a CSS masonry to occupy all the space of the page but I can’t find a good resource that explains how to do it, the web is using Nuxt, vuejs and tailwindcss, if possible I would like to implement the masonry with sass.

Another problem is that the images are lazy loaded and the height changes when they are loaded.

The website has NSFW content that’s why I’m not posting the link, but if you want to help me knowing how the structure is, please send me a message :)

 

Adam

Mr. Webwide
Administrator
Local time
01:21
Joined
Sep 24, 2019
Messages
1,243
Pronouns
he/him

Hey @VoidlessSeven7!

I'm not sure of a good way to produce a masonry effect in CSS/Sass, assuming that many of your images are different sizes? My go-to for masonry is usually Masonry.js which is really simple: Masonry

There is a way with Flexbox but requires a bit of JavaScript magic still to make sure that the average heights of the columns stays the same.

 
Last edited:

zadquieljlp

Member
Local time
02:21
Joined
Nov 9, 2019
Messages
9

Well, I have imagine a way to create a layaout like Pinterest, but I have never really done it, so the idea is to use css grids or flex box and make some columns, all same width, and with help of javascript put all the pictures inside the columns in horizontal order (so if you have 5 columns and 10 pictures, you need to have 2 rows of 5 pictures), and let the height auto, I don't know if I explain myself, but that's the idea, sorry the I don't have an example, but I hope it help

 

VoidlessSeven7

New member
Local time
03:21
Joined
Nov 20, 2019
Messages
4

I would first try @avena grid solution. It should work the same and without JS. So no better performance and no need to hook and relayout after every content change.
Yeah that was a nice suggestion, but I think Im gonna ditch the masonry all together, since when a image is clicked it displays extra info below causing changes to the layout and it breaks masonry, but thank you anyways :')

 

Gummibeer

Astroneer
Moderator
Local time
02:21
Joined
Oct 5, 2019
Messages
1,150
Pronouns
he/him

Yeah that was a nice suggestion, but I think Im gonna ditch the masonry all together, since when a image is clicked it displays extra info below causing changes to the layout and it breaks masonry, but thank you anyways :')
With CSS it shouldn't break. Because CSS is done every drawing cycle by browser.

 
Top