Animating CSS Grid (How To + Examples)
But animating these grid properties only recently gained supported by all three major browsers. Shall we take a look at a few examples to get the creative juices flowing?
First of all, this is what we’re talking about:
A simple two-column grid. Now, before, you might not have built this using CSS Grid because animations and transitions weren’t supported, but what if you wanted the left column — perhaps a sidebar navigation — to expand on hover? Well, now that’s possible.
I know what you’re thinking: “Animating a CSS property? Easy peasy, I’ve been doing it for years!” Me too. However, I ran into an interesting snag while experimenting with a particular use case.
So, we want to transition the grid itself (specifically
grid-template-columns, which is set on the
.grid class in the example). But the left column (
.left) is the selector that requires the
Let’s walk through the whole thing, starting with the HTML. Pretty standard stuff really… a grid with two columns.
Putting the cosmetic CSS aside, you’ll first need to set
display: grid on the parent container (
Next, we can define and size the two columns using the
grid-template-columns property. We’ll make the left column super narrow, and later increase its width on hover. The right column takes up the rest of the remaining space, thanks to the
We know we’re going to animate this thing, so let’s go ahead and throw a
transition in there while we’re at it so the change between states is smooth and noticeable.
That’s it for the
.grid! All that’s left is to apply the hover state. Specifically, we’re going to override the
grid-template-columns property so that the left column takes up a greater amount of space on hover.
In plain English this is saying, “Do something to the
.grid container if it contains an element named
.left inside of it that is in a hover state.” That’s why
So, let’s increase the width of the
.left column to
30% when it is hovered. The
.right column will continue to take up all the leftover space:
We could use CSS variables as well, which may or may not look cleaner depending on your personal preferences (or you might be using CSS variables in your project anyway):
I love that CSS grids can be animated now, but the fact that we can build this particular example with just nine lines of CSS is even more astounding.
This example transitions the grid container (the column widths) but also the individual columns (their background colors). It’s ideal for providing more content on hover.
It’s worth remembering that the
repeat() function sometimes produces buggy transitions, which is why I set the width of each column individually (i.e.
grid-template-columns: 1fr 1fr 1fr).
This example animatedly “adds” a column to the grid. However — you guessed it — this scenario has a pitfall too. The requirement is that the “new” column mustn’t be hidden (i.e. set to
display: none), and CSS Grid must acknowledge its existence while setting its width to
Because why not?
Same concept, but with more of that Michelle Barker pizzazz. Could make a nice loading spinner?
If you need help creating a digital marketing strategy for your business, don’t hesitate to contact one of Digidude’s consultants.