Day 97: animating grids

posted on

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

It’s possible to animate gap, grid-template-columns, and grid-template-rows.

Almost 6 years ago I wrote a blog post on CodePen titled “Animating CSS Grid Layout properties”. A lot has changed since then, especially recently, and I wanted to update the post, but the blogging feature on CodePen has been sunset and I can’t edit the post anymore. Since animating grids is topical again, I added it to the series.

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

Animating these properties will most likely affect larger areas of the screen. That's why it's important to only show animation to those who have no preference for reduced motion.

.grid {
--col: 9.5rem;
--row: 8rem;
--gap: 2rem;

display: grid;
grid-template-columns: repeat(3, var(--col));
grid-template-rows: repeat(4, var(--row));
grid-gap: var(--gap);

.grid--full {
--col: 30%;
--row: 4rem;
--gap: 1rem;

@media (prefers-reduced-motion: no-preference) {
.grid {
transition: all 1s;

See the Pen CSS Grid Layout: Animation by Manuel Matuzovic (@matuzo) on CodePen.

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 16
Chrome 107 (since Chrome 68)
Edge 107 (since Edge 79)

Other demos

See the Pen Animated Mondrian (CSS grid-template-columns|rows interpolation) by (@web-dot-dev) on CodePen.

See the Pen Animated CSS Grid by (@web-dot-dev) on CodePen.

See on CodePen.

Further reading