Can I animate CSS Grid Layout components?

Question

Is there a way to animate a changed order of components in an array that are displayed with a CSS Grid layout?

here is a short boilerplate

Answer 1

If you just want the user to see change of text, you can let a javascript, replace the text of each div. In this case, the divs will be the same though (e.g. div-1, div-2, div-3). You would only change the text.

If you want to change position of complete div + content (in html) and its css properties to change then you will have to expand the javascript to have a function that takes 3 values and randomly put them in order, (say, 1,3,2). Through the javascript you can then delete and create divs based on need.

Answer 2

NO.

According to the CSS Grid Layout Module Level 1 specification there are 5 animatable grid properties:

grid-gap, grid-row-gap, grid-column-gap as length, percentage, or calc

grid-template-columns, grid-template-rows as a simple list of length, percentage, or calc, provided the only differences are the values of the length, percentage, or calc components in the list.

^Source