Streaming live at 10am (PST)

Grid Element to Full Screen

Hello everyone,

Asked this question in a different way before but rephrasing it might be better for me to find a solution to the issue I am having.

I would like to have one grid element expand to full screen when clicked on and fill the viewport. It doesn’t matter for me if the grid is made with Flexbox or Webflow Grid.

Here are two images very simply explaining what I mean:

The transition in between the two layouts should be smooth. And that is basically why I am struggling since when something expands or shrinks through its size property, the transition is very abrupt due to elements pushing each other in a grid layout. When the interaction is made through the transform properties like move and scale (while the 4. element is with a higher Z-index), I do not know how to achieve the right placement and how to make it expand to fill the viewport.

I am not sharing a read-only link since any alternative method of making this work would be okay for me.

Thanks!!

Her is one ide. I have not tried but it might work. Do it it’s flex box.
Start with minimizing or hide the divs before expanding the last box. Then it will not struggle with the other boxes

Hey Janne!

Thanks for your answer. The problem is when the size gets smaller on the first three boxes inside a Flexbox, the transition is super weird and not smooth at all — also the fourth box gets adjusted when the other ones get smaller since the empty space pulls the 4. box.

Guess you are right, have never tried this. If I star to play with it I will keep you up to date

@devdo click on the top left box

https://preview.webflow.com/preview/resize-flexbox?utm_medium=preview_link&utm_source=designer&utm_content=resize-flexbox&preview=5b271faca5a0504955fe17c3b07ecf49&mode=preview

Hey Janne!

Right now there are no interactions on my side — I can’t click on the top left box. But I am very excited to see what it does :slightly_smiling_face:

Sorry, it is working now. Will try to understand how it works but gravitationally the first box can stay where it is since when the other ones disappear there is no space on the left to pull it inwards. Do you think there would be a way to make the same thing to the bottom right box for instance and also have it expand horizontally in a very smooth way as well (similar to how it expands vertically now)?

will try, this was a very simple test. will let you know

Something like this??

https://resize-flexbox.webflow.io/

Here is the publidhed link, the preview is still working

Thanks again Janne, this looks really good! Will try to understand how it works now.

I also made a small animation to explain what I had in mind (it is below) — sorry for not being more clear at the start. Do you think this can be done as well?

ezgif-3-dbb95afdbfa9

Ok, I see what you want to do now. I think it would be possible. Needs a lite bit more thinking and interactions. Will se if a can find some time… take a look at my interactions for box 1 and 4. You might solve it. Will keep you updated when i have some more time

Perfect! Thanks!! Can you share a read-only link? Right now I can’t access it except as a published link and the previous preview link is not working.

Also, below is (probably) a more challenging one with the same logic. Maybe we can solve this one as well?

ezgif-3-93c16b0a0029

It published as a clonable project on Webflow

EDIT

I have tried making it work but couldn’t.

Maybe the best solution is at this link: https://codepen.io/ApoorvArv/pen/NYvQZG

But I couldn’t make it work on Webflow. Do you know how we might do that?

Thanks :slightly_smiling_face: