Streaming live at 10am (PST)

Dynamic responsive grid layout (pinterest style)


#1

Hello, help me please. How to arrange the elements as shown in the picture?


Does the site, which is shown in the image? could you share a link to it?


Image alignment for images with different heights
Div block Float Left
#2

This will get you pretty close: https://webflow.com/design/grid-layout?preview=b17d99f101b7697bda494266cff65603


#3

Thank you, but I can not. I do not understand how to get this item


#4

are you looking for a dynamic or fixed solution.


#5

I was worried you'd say that! It can be done, but it's pretty tricky. I don't have that site anymore, but for a fixed solution you'd have to create 3 blocks, one 25% width, one 25%, and one 50%. Float them left. For the right section you'd have to drop two blocks in for the top and bottom thingies. The top block will have two blocks floated left and the bottom block will just have one.


#6

For a dynamic solution, Masonry is a great option. smile


#7

yes, that's what I need, thank you


#8

I figured thats where you were headed.
There are a lot of masonry solutions available
The one that @thewonglv pointed out pretty nice.
...may use that one myself.


#9

Hi @Daniel_Ace, @Revolution is right, Masonry works pretty nicely. I made a live demo for you.

Published Link: http://masonrydemo.webflow.com/
Public Link: https://webflow.com/design/masonrydemo?preview=23c74535ef029d47206cd15c3f856fcb

Give it a try smile
-Will


#10

Thanks, @thewonglv I will try as soon as free time


#11

Hi.

Is the links broken or taken down? I only get a 404 when clicking on them.

-Hallvardo


#12

Hi @Hallvardo, sorry for not updating this. The links don't work anymore because I deleted the demo. However, this site is a project I did once that used it and you can take a peek at it to see how it was done: https://webflow.com/website/William-Wong-Portfolio-v2


#13

Cool. Thanks.

Guess I have to learn how to get the stuff from here (http://masonry.desandro.com/#install) into webflow.
Kinda confused on what to copy and paste where.

Fancy hover-effects on portfolio-site btw.

  • H

#14

Hello all,

I was wondering if there was a way to align these images better on a site that I am designing. I can't seem to figure it out! They have different heights so I would like to have a set space in-between the each image both vertically and horizontally. There are other images with even more height variation. They are currently all in a div but I have tried everything else I can think of including using columns and individual divs.

I would like it to look similar to this website. I know it is coded differently, but was wondering if there was a similar way to align the images in Webflow.

http://www.samjonespictures.com/Selected-Work-/thumbs

Thank you in advance for the help.


#15

The way your reference site has its image on a grid like this is called "masonry", because it often use a JS library called like this. There is absolutely no way to achieve such a gris with HTML and CSS only (So you can save time looking).

Have a look here: http://masonry.desandro.com/


#16

This topic is now unlisted. It will no longer be displayed in any topic lists. The only way to access this topic is via direct link.


#17

#18

#19

#20