Table of Contents
Catalog
Example 1: Expand the sidebar
Example 2: Expand the panel
Example 3: Add rows and columns
More examples
Home Web Front-end CSS Tutorial Animating CSS Grid (How To Examples)

Animating CSS Grid (How To Examples)

Mar 09, 2025 pm 01:11 PM

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>
Copy after login
Copy after login

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

.grid {
  display: grid;
}
Copy after login
Copy after login

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;
}
Copy after login
Copy after login

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; /* 根据需要更改 */
}
Copy after login

.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>
Copy after login
Copy after login

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;
}
Copy after login
Copy after login

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;
}
Copy after login
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

It&#039;s out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.

Building an Ethereum app using Redwood.js and Fauna Building an Ethereum app using Redwood.js and Fauna Mar 28, 2025 am 09:18 AM

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum

Can you get valid CSS property values from the browser? Can you get valid CSS property values from the browser? Apr 02, 2025 pm 06:17 PM

I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That&#039;s like this.

Stacked Cards with Sticky Positioning and a Dash of Sass Stacked Cards with Sticky Positioning and a Dash of Sass Apr 03, 2025 am 10:30 AM

The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.

A bit on ci/cd A bit on ci/cd Apr 02, 2025 pm 06:21 PM

I&#039;d say "website" fits better than "mobile app" but I like this framing from Max Lynch:

Comparing Browsers for Responsive Design Comparing Browsers for Responsive Design Apr 02, 2025 pm 06:25 PM

There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing

Using Markdown and Localization in the WordPress Block Editor Using Markdown and Localization in the WordPress Block Editor Apr 02, 2025 am 04:27 AM

If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?

Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'? Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'? Apr 05, 2025 pm 05:51 PM

Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...

See all articles