[css-grid] Grid Item Position Transitions

[bramus]

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.

[bramus]

In my mind this could perhaps be an extra property on the Grid Container to activate this behavior.

Borrowing from scroll-behavior, I think of something like this:

.grid { 
  grid-item-reflow-behavior: smooth;
}

(property name to be bikeshed)

But I'm sure other folks / the WG has a better solution for this, should this be considered ;)

[bramus]

Borrowing from scroll-behavior, …

On Twitter it was pointed out that this approach, just like scroll-behavior, lacks the ability to be configured (duration, easing, delay).

Perhaps a new keyword to be used in conjunction with the already existing transition could form a better approach

.grid-item {
  transition: reflow 1s ease-in-out;
}

[birtles]

I'm wary of special casing grid for this. It seems to me to be just as common to want to animate flex box etc.

In general I think it would be great if browsers could interpolate between layouts since the browser already knows the before and after positions of the elements when updating layout. Doing it in JS requires recording the positions of each element before and after and generating appropriate transform animations.

(Not only that, if you get an update while the previous animations are still in play, you need to temporarily disable the animations so you can accurately get the un-animated end position--something which an API to get the un-animated computed style could help with.)

See https://twitter.com/mhartington/status/1449031009052368896 for a recent example of this use case.

I believe shared element transitions is the first step in that direction but it would be great to see what use cases are not well served by that and consider how we might address them in future.

[tettoffensive]

I was really hoping to use grid to avoid using javascript to animate this effect here. By changing the highlight's grid position which moves from one grid cell to another as the user clicks. I got it working except for the animation. So I had to use javascript instead to transition the translation and width.