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 (December 28th, 2017) 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 65
Chrome for Android 63, Opera Mini 32
Edge 16

Demos


13,298 2 33