Can you recreate this responsive flexbox gallery from codepen?

Design help Custom code
1

I found and interesting responsive flexbox image gallery in codepen and want to know how to make it in webflow.

2

You can’t do nested styles like header div img in Webflow so you need to give all 3 of those their own classes. Other than that, use the same structure and just use the css settings as a reference and copy them in Webflow.

3

Hi @AntonioBalderas!

You can do that in Webflow easily:

  1. Create a flex container with default layout and enable the “Wrap Children” setting so that images can wrap onto multiple lines if they don’t fit.
  2. Nest several Divs with images inside the container and give them all the same class.
  3. Select one of the nested Divs, open the Advanced Sizing popover in Flex Child Settings and apply these settings: Flex Grow: 1, Flex Shrink: 0, Flex Basis: 275px.
    Here’s what it means, if translated to human language:
  • Flex Basis: 275px — “Set base width of this thing to 275px”
  • Flex Grow: 1 – “This thing can grow larger than 275px if there’s empty space”
  • Flex Shrink: 0 – “This thing can’t shrink smaller than 275px”

With these settings, images will fill empty space inside their parent container and will try to fit onto one line until their width is larger than 275px, otherwise they will wrap onto next line.

You can play around with different Flex Basis values and switch between screen sizes to see this in action and achieve the desired result.

Hope this helps! And here’s a sample preview.

3 Likes
4

Thanks you are awesome!