 Hi there, my friend and friends. I actually had some other video planned for today, but I'm too excited about figuring out that we can animate or transition from a height of zero to a height of auto with CSS. It's really easy to do. So we're going to look at how this is actually possible, how I figured it out, and also a more practical use case than the very simple one we'll look at at the beginning here. But yeah, this is really cool. So here I have this really quick example. And we just have a div here. And then I have this is amazing right there. Nothing too fancy. And what we're going to do on this quick example is we're going to set this to have a display of grid. And we're going to give it a grid template rows. And the rows are actually me zero FR. And this should set the grid to be zero height, basically. So we're getting to that zero that we wanted. But obviously nothing actually changes here. So we're going to go into that quick example. We're going to grab that child that's there. So we can grab the div. So we're taking this guy, which actually has that height of zero because it's following this. The problem is the content is overflowing. So we can give that a overflow of hidden and just like that we're to where we want to start with, which is fantastic. Then we just take whatever method you want to be able to transition to something. So often you'd probably be using some JavaScript or something to toggle this or whatever. But let's do the simple one here, which is just going to be a quick example, hover, because it's the easiest way to do something for demos like this. And we're just going to say that when we hover it, we're going to have our grid template rows. And it's going to be a one FR and one FR just means take up the space, you know, the natural space that you'd already be taking up and you would divide it evenly if there was multiple rows, but we only have one row right here. So then if I hover on top, it goes like that. Now this is normally what you'd be getting when you would be transitioning from a zero to an auto, and you try doing your transition. But now grid template rows and columns are animatable properties. So we can do a transition on our grid template rows. And the worst part about this is that it's so long to write that out. But we get our grid template rows, let's just say 500 milliseconds. And just like that, it works. It's fantastic. I'm so happy about this. And you might be wondering about like, what if there's more content? That's fine. You can come here and we could say like Lorem 100 and have a whole bunch of text in there. Now this one is nice and short. And this one is a lot longer. And check that out. It works super well. It goes a bit fast because we have it at 500ms. But you know, it would work. And what if you needed a lot of paragraphs? Well, paragraph times four and Lorem. And now if we come here, now we have four paragraphs that are all there. And it is just working. And I'm going to show you a bit more of a practical setup and use for this, but just really fast. I actually heard about this from Chris Coyer a while back. And I forgot how he did it. I could never actually get it to work. But then I found this blog post by Keith J. Grant, which I will link to in the description. He actually looked at how we can also do this with Flexbox. But I much prefer the grid solution. But a big thank you to Keith for sharing this because it's great. And it's so easy to do. And so if we go and jump over to this other code pen, and all of this is shared over there, you can see that we can do an accordion with this. And it just works super, super well. It's pretty awesome. So yeah, really nice. I'm doing the exact same trick. I have my accordion content here. And then I have a div with that paragraph. So there it is. Then in this other one that has more stuff in it, div with just more paragraphs. And yes, it does mean you have to have this nested div inside the parent. If you don't like just divs floating there for no reason, give it a class if you want to. But it works perfectly fine like this. And all I'm doing here is if we look in here, I have my content exactly like we looked at the hidden. Just here instead of using a hover, I'm toggling an area hidden that's false or true. You could just be doing this with a class instead, whatever is opened or something, depending on how you want to set things up. But yeah, it's really just simple. It's easy to do and it just works out, which is the best part of all of this. So a big thanks to Chris for first sharing this and then for Keith for resharing it to remind me that this is possible. And then, yeah, I really hope you like this one and the short format. I just I just had to share this. I was super excited about it that I got it working. So here it is. And I look forward to seeing you at the next time. But until then, of course, don't forget to make your core on the Internet just a little bit more awesome.