Animating CSS Grid (How To + Examples) | CSS-Tips

I’m happy to shine a light-weight on the truth that the CSS grid-template-rows and grid-template-columns properties are now animatable in all main net browsers! Effectively, CSS Grid has technically supported animations for a very long time, because it’s baked proper into the CSS Grid Format Module Degree 1 spec.

However animating these grid properties solely just lately gained supported by all three main browsers. We could check out just a few examples to get the inventive juices flowing?

Instance 1: Increasing sidebar

To begin with, that is what we’re speaking about:

A easy two-column grid. Now, earlier than, you would possibly not have constructed this utilizing CSS Grid as a result of animations and transitions weren’t supported, however what when you needed the left column — maybe a sidebar navigation — to broaden on hover? Effectively, now that’s potential.

I do know what you’re pondering: “Animating a CSS property? Straightforward peasy, I’ve been doing it for years!” Me too. Nevertheless, I bumped into an fascinating snag whereas experimenting with a specific use case.

So, we wish to transition the grid itself (particularly grid-template-columns, which is about on the .grid class within the instance). However the left column (.left) is the selector that requires the :hover pseudo-class. Whereas JavaScript can remedy this conundrum simply — thanks, however no thanks — we will accomplish it with CSS alone.

Let’s stroll via the entire thing, beginning with the HTML. Fairly normal stuff actually… a grid with two columns.

<div class="grid">
  <div class="left"></div>
  <div class="proper"></div>
</div>

Placing the beauty CSS apart, you’ll first have to set show: grid on the mother or father container (.grid).

.grid {
  show: grid;
}

Subsequent, we will outline and measurement the 2 columns utilizing the grid-template-columns property. We’ll make the left column tremendous slim, and later enhance its width on hover. The suitable column takes up the remainder of the remaining area, because of the auto key phrase.

.grid {
  show: grid;
  grid-template-columns: 48px auto;
}

We all know we’re going to animate this factor, so let’s go forward and throw a transition in there whereas we’re at it so the change between states is clean and noticeable.

.grid {
  show: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* Change as wanted */
}

That’s it for the .grid! All that’s left is to use the hover state. Particularly, we’re going to override the grid-template-columns property in order that the left column takes up a higher quantity of area on hover.

This alone isn’t all that fascinating, though it’s superior that animations and transitions are supported now in CSS Grid. What’s extra fascinating is that we will use the comparatively new :has() pseudo-class to model the mother or father container (.grid) whereas the kid (.left) is hovered.

.grid:has(.left:hover) {
  /* Hover kinds */
}

In plain English that is saying, “Do one thing to the .grid container if it accommodates a component named .left inside it that’s in a hover state.” That’s why :has() is also known as a “mother or father” selector. We are able to lastly choose a mother or father primarily based on the kids it accommodates — no JavaScript required!

So, let’s enhance the width of the .left column to 30% when it’s hovered. The .proper column will proceed to take up all of the leftover area:

.grid {
  show: grid;
  transition: 300ms;
  grid-template-columns: 48px auto;
}

.grid:has(.left:hover) {
  grid-template-columns: 30% auto;
}

We may use CSS variables as nicely, which can or might not look cleaner relying in your private preferences (otherwise you is perhaps utilizing CSS variables in your challenge anyway):

.grid {
  show: grid;
  transition: 300ms;
  grid-template-columns: var(--left, 48px) auto;
}

.grid:has(.left:hover) {
  --left: 30%;
}

I love that CSS grids could be animated now, however the truth that we will construct this specific instance with simply 9 strains of CSS is much more astounding.

Right here’s one other instance by Olivia Ng — related idea, however with content material (click on on the nav icon):

Instance 2: Increasing Panels

This instance transitions the grid container (the column widths) but in addition the person columns (their background colours). It’s excellent for offering extra content material on hover.

It’s value remembering that the repeat() perform generally produces buggy transitions, which is why I set the width of every column individually (i.e. grid-template-columns: 1fr 1fr 1fr).

Instance 3: Including Rows and Columns

This instance animatedly “provides” a column to the grid. Nevertheless — you guessed it — this situation has a pitfall too. The requirement is that the “new” column mustn’t be hidden (i.e. set to show: none), and CSS Grid should acknowledge its existence whereas setting its width to 0fr.

So, for a three-column grid — grid-template-columns: 1fr 1fr 0fr (sure, the unit should be declared despite the fact that the worth is 0!) transitions into grid-template-columns: 1fr 1fr 1fr appropriately, however grid-template-columns: 1fr 1fr doesn’t. In hindsight, this truly makes good sense contemplating what we learn about how transitions work.

Right here’s one other instance by Michelle Barker — similar idea, however with an additional column and lot extra pizzazz. Be sure that to run this one in full-screen mode as a result of it’s truly responsive (no trickery, simply good design!).

Just a few extra examples

As a result of why not?

This “Animated Mondrian” is the unique proof of idea for animated CSS grids by Chrome DevRel. The grid-row‘s and grid-column‘s make the most of the span key phrase to create the format you see earlier than you, after which the grid-template-row’s and grid-template-column‘s are animated utilizing a CSS animation. It’s nowhere close to as advanced because it appears!

Identical idea, however with extra of that Michelle Barker pizzazz. May make a pleasant loading spinner?

Wrapping up with a little bit of nostalgia (displaying my age right here), the not-very-griddy animated CSS grid by Andrew Harvard. Once more — similar idea — it’s simply you could’t see the opposite grid objects. However don’t fear, they’re there.