Animating CSS Grid Columns and Rows

I was very excited when I saw a tweet by Jen Simmons announcing that CSS grid animations are now available in Firefox Nightly, so I decided to check it out and explore what’s possible.

CSS Grid is an extraordinary tool that can help us developers develop all kinds of fancy-looking layouts. The best part is that it’s already quite well supported by all current browser vendors.

Anyway, let’s try to make it move.

Getting Firefox Nightly

At the time of writing, Firefox Nightly 66.0a is required to run the samples below. If you want to install it, you can head over to the download page and grab a copy. Don’t forget to create a dedicated profile before installation so you can keep your existing Firefox settings intact while running the pre-release version.

What we are going to make

Here is a preview of what we are going to build:

According to the CSS Grid Layout Module Level 1 specification, the rid properties which can now support animation also include gap, grid-template-columns, grid-template-rows and there are the ones I am going to focus on in this post. Let’s create an initial HTML structure which will be the backbone of the grid layout which for the sake of simplicity is just a lot of divs for each cell of the grid:

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="wide">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div></div>
</div>

My intention is to create a grid which animates the size of its columns and rows. One of the grid cells (with class .wide ) will span over two columns and be a grid of itself, showing 6 equally sized cells.

Let’s apply the needed styles in order to achieve this effect:

.grid {
  margin: 5px;
  display: grid;
  grid-template-columns: 90px 200px 190px;
  grid-template-rows: 100px 250px;
  gap: 5px;
}

div.wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto-fill);
  gap: 5px;
  /* the background of this cell will form the color for the gutter of the nested grid */
  background-color: white;
}

The additional class wide here is used to specify that one of the cell should span two columns instead of one.

To better visualize the result, let’s add some colors:

/* help distinguish the grid cells with different colors */

.grid > div {
  background-color: purple;
}

.grid > div:nth-child(2n) {
  background-color: violet;
}

.grid > div:nth-child(5n + 1) {
  background-color: mediumpurple;
}

Up to this point, any current browser will be able to display the result:

Grid preview in Firefox

Here comes the fun part, let’s animate the column and row definitions of the grid:

.grid {
  animation: moveit 2000ms ease infinite alternate
}

@keyframes moveit {
  0% {
    grid-template-columns: 90px 200px 190px;
    grid-template-rows: 100px 250px;
  }
  100% {
    grid-template-columns: 240px 180px 60px;
    grid-template-rows: 180px 90px;
  }
}

And voila! 🎉