Pinterest/Masonry Layout- Where to...

Sep 26th, 2018 at 01:09 AM
User 2879936 Photo

Laura K
Registered User
38 posts

Greetings! :)

I'm trying to figure out this layout for my webpage gallery:

https://forum.webflow.com/uploads/webflow1/original/3X/3/b/3b6a2037659ac26193fb873c953fe74fd3619712.jpg

I want to eliminate all white space, except for a few pixels for margin between pictures (as shown in the picture above ;)). The pictures vary in size.

I'm fiddling with flex box but getting lots of unwanted white space between certain photos. Is this layout possible with Grid (I have zilch experience with Grid)?

Anyone have any suggestions on where to begin?

Thank you!
Laura

Sep 26th, 2018 at 01:26 AM
User 2903050 Photo

Phil Dias
Registered User
260 posts

Definitely will be able to create using grid. The white space would be created using column gap and row gap. The columns would be 1fr each but the rows would have to be varying height which would be the challenging bit. Do you have the pictures of varying heights?
https://www.purpleespresso.com
https://www.drivingwithphil.com
https://www.dla-driving.co.uk
Sep 26th, 2018 at 01:33 AM
User 2879936 Photo

Laura K
Registered User
38 posts

Thanks for the quick reply Phil!

Yay! I’m glad to know it’s possible!

The photos are located here:

http://huttonfinebuilders.coffeecup.com/gallery.html

:)
Sep 26th, 2018 at 02:32 AM
User 2903050 Photo

Phil Dias
Registered User
260 posts

Yes it's possible it's just getting the varying row height to play nicely.
https://www.purpleespresso.com
https://www.drivingwithphil.com
https://www.dla-driving.co.uk
Sep 26th, 2018 at 04:38 AM
User 122279 Photo

Inger
Senior Advisor
14,647 posts
Online Now

If you are more familiar with flex, take a look in my sharing folder (URL in signature) and check out the couple of galleries I have there. You probably have to look in the right-most column, the ones for SD3.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Sep 26th, 2018 at 08:24 AM
User 2903050 Photo

Phil Dias
Registered User
260 posts

Hi Laura, after having a little play and search on the internet it is possible but its really difficult as CSS grid is really for 2D grids. We could try line based placement of your images but would need a lot of try and error so get rid of the white space.
Regards
https://www.purpleespresso.com
https://www.drivingwithphil.com
https://www.dla-driving.co.uk
Sep 26th, 2018 at 10:08 AM
User 244626 Photo

Twinstream
Registered User
811 posts

https://masonry.desandro.com/
Bootstrap 5 CSS Grid.
Sep 26th, 2018 at 12:04 PM
User 2879936 Photo

Laura K
Registered User
38 posts

Inger! Your "Masonry 'Brick work' gallery" component saved me! That was exactly what I was looking for! THANK YOU!

And big thank you Phil and Twinstream for your help as well!!! :)
Sep 26th, 2018 at 02:02 PM
User 122279 Photo

Inger
Senior Advisor
14,647 posts
Online Now

Great! Glad I was able to help! :)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Sep 26th, 2018 at 04:03 PM
User 2903050 Photo

Phil Dias
Registered User
260 posts

I'm going to have a look Inger!
https://www.purpleespresso.com
https://www.drivingwithphil.com
https://www.dla-driving.co.uk

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.