Can you recreate this responsive flexbox gallery from codepen?

Design help Custom code
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