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.