Flexbox image montage

Happy New Year Webflowers,

I’m trying to re-create an image montage similar to this one using Flexbox, however i’m in a bit of a tangle with it.

Can anyone explain how this is created?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

Replying because I’d like to get a notification on how to do this too.

Hi @davidjayukay and @Macker,

Definitely great question.

The following is a solution I would use, but I’m happy to hear how others may do it:

  1. First, I see that the montage is separated into large image wrappers, and small image wrappers. To contain those - I created a section with the flexbox display setting with a height of approximately 700px.

  2. Then, I would create a small and large flexbox wrapper. The large flexbox wrapper would be 40% and the small wrapper would be 20%.
    image

  3. Then, I would separate the small flexbox container into a top and bottom.
    image

  4. Next, I added 1rem margin where needed.

  5. Lastly, you can add your images to the background of each wrapper with a combo class name (make sure you select “cover” so that the image fills the wrapper).

You can view a short video I created at the following URL: https://youtu.be/397h2PfBhSg

Also, the following is the Webflow share link: Webflow - Flexbox Montage

And, the following is the Live link: http://flexbox-montage.webflow.io/

Hopefully this helps :nerd_face: .

Best regards,
Micah

2 Likes

This javascript library might be useful:

1 Like

@micahryanhtml Thanks for the video tutorial, you made that look simple :wink: I’ll scrap what I had and give this a go following your method… :slight_smile:

@orgreeno this was really helpful too know about too. I’ve not implemented any additional javascript into webflow yet. If there are any tutorials that explain how to go about this I’d be interested to learn.

Thanks guys!

1 Like

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.