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.

Browser support

Last update: March 11th, 2020.

Browser support for animatable grid properties
Browser (grid-)gap, (grid-)row-gap, (grid-)column-gap grid-template-columns grid-template-rows
Firefox 66 ✅ (since FF 55, FFM 53)
Safari 13.0.4
Chrome 68
Chrome for Android 66, Opera Mini 33, Edge 79
Edge 16

Demos