[csswg-drafts] [css-grid] Grid Item Position Transitions (#6736)

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Grid Item Position Transitions ==
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`](https://github.com/aholachek/animate-css-grid) to smoothly animate the Grid Items as the Grid changes.

![](https://www.bram.us/wordpress/wp-content/uploads/2018/06/animate-css-grid.gif)

> 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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6736 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 17 October 2021 08:58:56 UTC