I am struggling with making the individual div inside a grid (can be made with flexbox as well) expand to fullscreen when clicked on with a smooth transition. At the moment when I make the interaction with existing tools, the change is very abrupt. I can’t achieve a smooth transition in which the cells with the number 1, 2 and 3 shrink while the one labelled 4 extends to fullscreen.
Do you think there might be a way to achieve this or have you came across an answer to this issue before?
Below are the images which explains the layout change. But the main issue is, as I have mentioned, the smooth transition between these two layouts.