Irregular gaps in flex layout

Design help Animations & Interactions
1

I use photos in lightboxes ordered in a grid (layout flex). I use show/hide interaction because I have filter buttons. So when all pictures are shown, everything works. But when I use a filter button to hide some elements, then there are irregular gaps between the elements. This is really weird, I’d be grateful for help!!

Screenshot (155)
Screenshot (155)1897×852 110 KB

Screenshot (154)
Screenshot (154)1876×853 133 KB

2

Hi Julia, what’s your readonly designer link?

3

The issue arises because Webflow’s flexbox layout does not automatically reflow when elements are hidden using display: none, leading to irregular gaps. Instead of using display: none, try setting visibility: hidden and position: absolute to remove elements without disrupting the layout structure. Ensure the parent wrapper is set to display: flex with flex-wrap: wrap, and child elements have flex: 1 1 auto; for proper alignment. Alternatively, using display: grid instead of flexbox can help maintain the correct structure when filtering elements. If you are working with a CMS collection, consider using Finsweet’s CMS Filter, which dynamically removes filtered elements from the DOM, preventing layout shifts.

1 Like
4

Hi, thank you, its: Webflow - Portfolio Julia Neubert

5

whar do you mean by visibility hidden? I don’t think I can use this as an interaction. Webflow - Portfolio Julia Neubert

6

Julia is your filtering all Interactions-based?

I’d almost certainly use FInsweet’s CMS filter even though your grid content is static. You may have to manually re-init lightboxes after a filter change, but that’s pretty straightforward.

My guess is that your approach is to hide everything, and then show specific items by class- however some of those items are inside of other items, such as lightboxes. That creates your layout issues, since you then have empty lightboxes in your layout, which might not be visible but are nonetheless there.

You can verify that if you inspect the HTML and CSS in your published site.

I’d also use a grid rather than flex-based layout. It’s easier to configure your responsive layouts and you’ll see those gaps much more clearly.

If you want to stick with the current design approach, separate your styling classes from your functional classes;

  • create classes like filter-3d and filter-animation that have no styling
  • wrap each of your portfolio items in a DIV, and assign those classes, only.
  • when wrapping a lightbox, wrap the whole lightbox, not the internal thumbnail of the lightbox
  • redesign your filter interactions to target those filter classes