Webwide is the inclusive forum community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. We understand that our community is one of creation which is why we, unlike many other discussion forums, encourage sharing of your own projects and content. Creating a forum account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Forum Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

Help Wanted Masonry help

VoidlessSeven7

New member
Joined
Nov 20, 2019
Messages
4
Reaction score
0
Points
3
Location
Spain
Local Time
Today, 02:58
Website
akbal.dev
Credits
5
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
Joined
Sep 24, 2019
Messages
1,139
Reaction score
1,169
Points
1,115
Location
United Kingdom
Local Time
Today, 00:58
Credits
10,490
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
Joined
Nov 9, 2019
Messages
9
Reaction score
5
Points
5
Location
Distrito Capital, Venezuela
Local Time
Today, 01:58
Credits
0
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
 

Gummibeer

Astroneer
Joined
Oct 5, 2019
Messages
1,060
Reaction score
889
Points
985
Age
27
Location
Hamburg, Germany
Local Time
Today, 01:58
Website
gummibeer.de
Credits
2,036
Real Name
Tom Witkowski
Thanks everyone, im trying to accomplish it with the masonry library from desandro
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.
 
  • Like
Reactions: VoidlessSeven7

VoidlessSeven7

New member
Joined
Nov 20, 2019
Messages
4
Reaction score
0
Points
3
Location
Spain
Local Time
Today, 02:58
Website
akbal.dev
Credits
5
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
Joined
Oct 5, 2019
Messages
1,060
Reaction score
889
Points
985
Age
27
Location
Hamburg, Germany
Local Time
Today, 01:58
Website
gummibeer.de
Credits
2,036
Real Name
Tom Witkowski
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