Description
When changing a Grid Container's grid-gap
, grid-template-columns
or when changing a Grid Item's grid-column
, grid-row
, Grid Layout will do its thing and reposition the Grid Items as space becomes available/unavailable.
Adjusting things such as grid-gap
can already be done via transition/animation, but a Grid Item switching Row/Column will happen instantaneously.
See a demo such as https://codepen.io/bramus/pen/ad379eb0cb8c4e11e0eb17e3e751d58c?editors=1010 where you can alter these properties. Notice how the grid-gap gets transitions but the grid items (if too less space is available) jump from one row to the other.
The demo listed above is a fork from https://codepen.io/aholachek/pen/VXjOPB, which uses a JS-library named animate-css-grid
to smoothly animate the Grid Items as the Grid changes.
This script makes it easy to transition your CSS grid gracefully from one state to another. If the content of the grid changes, or if the grid or one of its children is updated with the addition or removal of a class, the grid will automatically transition to its new configuration.
It would be nice if this kind of behavior could be achieved without any JS.