Animating CSS Grid (How To Examples)

CSS Grid's grid-template-rows and grid-template-columns properties are now available for animation in all major browsers! In fact, CSS Grid has long supported animations because it is built into the CSS Grid layout module level 1 specification.

But until recently, all three major browsers fully support animation of these mesh properties. Let’s look at a few examples to inspire your creativity!

Catalog

• Catalog
• Example 1: Expand the sidebar
• Example 2: Expand the panel
• Example 3: Add rows and columns
• More examples

Example 1: Expand the sidebar

First of all, this is what we are going to discuss:

A simple two-column grid. Previously, you probably wouldn't have built it with CSS Grid because animations and transitions are not supported, but what if you want the left column (probably sidebar navigation) to expand on hover? Now, this is possible.

I know what you are thinking: "Animation CSS attributes? A piece of cake, I've been doing it for many years!" So do I. However, I encountered an interesting hurdle when trying a specific use case.

So we want to convert the mesh itself (especially the .grid set on the grid-template-columns class in the example). But the left column (.left) is the selector that requires the :hover pseudo-class. While JavaScript can easily solve this problem - thank you, no need - we can implement it with just CSS.

Let's explain the whole process step by step, starting with HTML. It's actually very standard...a grid with two columns.

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

Decorative CSS aside, you first need to set .grid on the parent container (display: grid).

.grid {
  display: grid;
}

Next, we can use the grid-template-columns attribute to define and resize the two columns. We set the left column very narrow and later increase its width when hovering. The column on the right will take up the rest of the space, thanks to the auto keyword.

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

We know we want to animate it, so let's add a transition effect while adding the animation so that the changes between states will be smooth and obvious.

.grid {
  display: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* 根据需要更改 */
}

.grid It's done! The rest is the application hover state. Specifically, we will override the grid-template-columns property so that the left column takes up more space when hovering.

This alone isn't that fun, although CSS Grid now supports animation and transitions. What's more interesting is that we can use the relatively new :has() pseudo-class to style the parent container (.left) when the child element (.grid) is hovered.

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

In simple English, this means: "If the .grid container contains an element named .left and the element is hovering, then perform some operations on the .grid container." This is why :has() is often referred to as a "parent" selector. We can finally select the parent element based on the child elements it contains - no JavaScript is required!

So let's increase the width of the .left column to 30% when hovering. The .right column will continue to occupy all remaining space:

.grid {
  display: grid;
}

We can also use CSS variables, which may or may not look concise, depending on your personal preferences (or you may already use CSS variables in your project):

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

I really like the CSS grids can now make animations, but the fact that we can build this particular example with only nine lines of CSS code is even more amazing.

This is another example of Olivia Ng—a concept similar, but contains content (click on the navigation icon):

Example 2: Expand the panel

This example converts the grid container (column width) and also converts the individual columns (their background color). It's perfect for providing more content on hover.

It is worth remembering that the repeat() function sometimes produces wrong transitions, which is why I set the width of each column separately (i.e. grid-template-columns: 1fr 1fr 1fr).

Example 3: Add rows and columns

This example animates a column to the grid. But—you guessed it—there is also a trap for this situation. The requirement is that the "new" column cannot be hidden (i.e. set to display: none) and that the CSS Grid must acknowledge its existence when it sets its width to 0fr.

So for a three-column grid - grid-template-columns: 1fr 1fr 0fr (yes, the unit must be declared even if the value is 0!) will be converted correctly to grid-template-columns: 1fr 1fr 1fr, but grid-template-columns: 1fr 1fr will not. In hindsight, this is actually completely reasonable given our understanding of how the transition works.

This is another example of Michelle Barker—the same concept, but with a column and more cool effects. Make sure to run this example in full screen mode, as it is actually responsive (no tricks, just good design!).

More examples

Why not?

This "animated Mondrian" is the initial proof of concept for animated CSS grids produced by Chrome DevRel. grid-row and grid-column Use the span keywords to create the layout you see before you, and then use CSS animation to animate grid-template-row and grid-template-column. It's not as complicated as it seems!

Same concept, but more of Michelle Barker’s cool effects. Can you make a good loading spinner?

Finally review nostalgia (I'm age here), Andrew Harvard makes an animated CSS grid that isn't quite like a grid. Same – the same concept – you just can't see other grid items. But don't worry, they're there.

The above is the detailed content of Animating CSS Grid (How To Examples). For more information, please follow other related articles on the PHP Chinese website!