I’m happy to shine a lightweight on the truth that the CSS grid-template-rows and grid-template-columns properties are now animatable in all main internet browsers! Nicely, CSS Grid has technically supported animations for a very long time, because it’s baked proper into the CSS Grid Structure 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 artistic 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 may not have constructed this utilizing CSS Grid as a result of animations and transitions weren’t supported, however what in case you needed the left column — maybe a sidebar navigation — to broaden on hover? Nicely, now that’s attainable.
I do know what you’re considering: “Animating a CSS property? Straightforward peasy, I’ve been doing it for years!” Me too. Nonetheless, 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 dad or mum container (.grid).
.grid {
show: grid;
}
Subsequent, we will outline and dimension the 2 columns utilizing the grid-template-columns property. We’ll make the left column tremendous slender, and later enhance its width on hover. The best column takes up the remainder of the remaining house, 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 easy 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 house 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 dad or mum container (.grid) whereas the kid (.left) is hovered.
.grid:has(.left:hover) {
/* Hover types */
}
In plain English that is saying, “Do one thing to the .grid container if it comprises a component named .left within it that’s in a hover state.” That’s why :has() is also known as a “dad or mum” selector. We are able to lastly choose a dad or mum based mostly on the youngsters it comprises — 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 house:
.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 effectively, which can or might not look cleaner relying in your private preferences (otherwise you is likely to be 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 might 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 ideally suited for offering extra content material on hover.
It’s value remembering that the repeat() operate typically 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. Nonetheless — you guessed it — this state of affairs 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 have to be declared regardless that the worth is 0!) transitions into grid-template-columns: 1fr 1fr 1fr accurately, 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 — identical idea, however with an additional column and lot extra pizzazz. Be certain 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 seems!
Identical idea, however with extra of that Michelle Barker pizzazz. May make a pleasant loading spinner?
Wrapping up with a little bit of nostalgia (exhibiting my age right here), the not-very-griddy animated CSS grid by Andrew Harvard. Once more — identical idea — it’s simply which you can’t see the opposite grid gadgets. However don’t fear, they’re there.
Animating CSS Grid (How To + Examples) initially revealed on CSS-Tips, which is a part of the DigitalOcean household. It’s best to get the e-newsletter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!