Note: This post will be constantly updated to reflect the most recent changes in browsers

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.

Browsersupport

As of today (May 7th, 2018) only the animation of (grid-)gap, (grid-)row-gap, (grid-)column-gap is implemented in any of the tested browsers.

Browsersupport for animatable grid properties
Browser (grid-)gap, (grid-)row-gap, (grid-)column-gap grid-template-columns grid-template-rows
Firefox 55, Firefox 53 Mobile
Safari 11.0.2
Chrome 68
Chrome for Android 66, Opera Mini 33
Edge 16

Demos


19,801 5 42