Design flexbox challenge

Hey everyone,

I’m fairly new to webflow and have designed an interactive piece but not sure how to go about building it.

  1. I want to build a 4 by 3 grid build of squares (see image).
  2. When you click on each square I would like a larger white info box to pop up over the top of the other squares. Each square you press means the box pops up in a different place and has different info in.

Anyone got any advise on how to build? I think the 4x3 grid is relatively easy to build but what about the interactive grid of popups?

Any thoughts?

Any ideas anyone? Bit stuck here

Post edited for clarity:

here is Webflows tutorial which is quite good. I took a stab at it which is in the link in my post below.

flexbox grid

Thanks so much for sending both those links. I really learnt a lot from playing the Flexbox game!

And the grid is helpful too. To take it one step further, any ideas around if I were to press on one of the boxes, I could get another box to appear elsewhere on the screen with more information in it. Do I create another grid in a different Div and then offset it so it layers over the top?

Thanks for your help so far…

Glad you found it useful. Yes I believe if you want an overlay to appear on a mouse over, for instance, you would set both flexbox grids to Absolute. The stuff in the second flexbox can be configured in interactions menu to initialize as hidden on page load, and triggered to display.

1 Like

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