Animating a CSS Grid template to create a case carousel

In CSS not all properties are animatable. Many of them swap at exactly 50% of the animation duration. These properties are called discrete properties. One of these properties that might seem hard to animate, are the CSS template layouts. But don’t be deceived — animating CSS Grid layouts is indeed possible! Today, we’ll explore how to do just that.

Creating our first CSS Grid layout

In this tutorial we will be combining CSS grid layouts, and animating them based on whether a child element is hovered, by using the css :has() pseudo selector. Using this technique we will create a basic case carousel.

In order to understand the basics of this animation, we define our grid first.

1
.wrapper {
2
  display: grid;
3
  gap: 12px;
4
  grid-template-columns: 4fr 1fr 1fr;
5
}
6

7
.slide {
8
  background: rgba(255, 255, 255, 0.3);
9
  border-radius: 24px;
10
}

1
<div class="wrapper">
2
  <div class="slide"></div>
3
  <div class="slide"></div>
4
  <div class="slide"></div>
5
</div>

By defining a grid with grid-template-columns set to 4fr 1fr 1fr, we’re creating a grid with 3 columns. The first column will take up 4 times the space of the other two columns. This is our default active slide.

Changing the parent when children are hovered

If we want to change the columns when a child is hovered, we can use the :has() pseudo selector. A new selector which already is supported in all major browsers!

In essence it works as follows.

1
.wrapper:has(.slide:hover) {
2
  background-color: red;
3
}

Inside the parenthesis of a :has() selector, you can define any valid CSS selector. The browser will then test to see if that element is present within the element that you added the :has() selector to. If it is, the styles will be applied to the element that has the :has selector — in this case .wrapper.

That is why you see the background turn red when you hover any of its children, but not when you hover the gap between the elements. At that moment there isn’t any child that is hovered, thus the background does not turn red.

Removing the gap

As you noticed in the example above, the :has() selector won’t be triggered when you hover the gap. Meaning that if we would expand a certain slide, and then move over the gap, it would quickly collapse and you would might suddenly hover a different child.

Let’s take a look at what that weird behavior would look like if the gap was a bit wider. Try moving your cursor from the third child to the second. You’ll probably end up showing the first child instead.

To show the correct slide, we need to remove the gap and solve this with padding instead.

1
.wrapper {
2
  display: grid;
3
  grid-template-columns: 4fr 1fr 1fr;
4
}
5

6
.slide {
7
  padding: 0 12px;
8
}
9

10
.slide .content {
11
  background: rgba(255, 255, 255, 0.3);
12
  border-radius: 24px;
13
}
14

15
.wrapper:has(.slide:hover) {
16
  background-color: red;
17
}

1
<div class="wrapper">
2
  <div class="slide">
3
    <div class="content"></div>
4
  </div>
5
  <div class="slide">
6
    <div class="content"></div>
7
  </div>
8
  <div class="slide">
9
    <div class="content"></div>
10
  </div>
11
</div>

Animating the grid template

You notice when you leave the slide’s .content div now, you’re actually still hovering the .slide div, meaning we keep seeing the hover state.

Now we know how we can change the parent’s style when hovering a child, we can also change the template columns instead of the background color.

1
.wrapper {
2
  display: grid;
11 collapsed lines
3
  grid-template-columns: 4fr 1fr 1fr;
4
}
5

6
.slide {
7
  padding: 0 12px;
8
}
9

10
.slide .content {
11
  background: rgba(255, 255, 255, 0.3);
12
  border-radius: 24px;
13
}
14

15
.wrapper:has(.slide:nth-child(1):hover) {
16
  grid-template-columns: 4fr 1fr 1fr;
17
}
18

19
.wrapper:has(.slide:nth-child(2):hover) {
20
  grid-template-columns: 1fr 4fr 1fr;
21
}
22

23
.wrapper:has(.slide:nth-child(3):hover) {
24
  grid-template-columns: 1fr 1fr 4fr;
25
}

This way we are changing the layout depending on which child is hovered:

Animating that change.

The final missing piece is animating this grid change. And since the CSS grid layouts can be animated, it is as simple as adding a transition property to the .wrapper element.

1
.wrapper {
2
  transition: grid-template-columns 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
3
}

Learning more

Of course this tutorial only touched on the basics of this grid animation. Make sure to watch the video at the top of this article for a more in depth explanation, as well as adding more features to this carousel!