Animating CSS Grid Layout properties
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 | (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 | ✅ | ❌ | ❌ |