The simple trick to transition from height 0 to auto with CSS

Animating or transitioning to and from height auto is, well, not really possible (though it is being worked on!), but luckily, there is actually a solution using CSS Grid that’s really easy to implement!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:20 - The setup
01:55 - The transition
02:20 - It works with more content too
02:45 - How I discovered this
03:10 - Using it for an accordion

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[oxuhs-gyxm]

Make sure to add "grid-row: 1 / span 2;" on the child element. Otherwise the child will animate at a diffrent speed than the parent.

[glenn_myridia]

This is gold. I spent a while building an accordion in react a couple of weeks ago and had to resort to refs to calculate the height dynamically. Thanks Kevin!

[waffle-codes-js]

You have literally fulfilled your tagline goal with me. I may not be great at css yet but I’ve definitely fallen in love with css and front end work.

[pascalmaranus]

This is absolutely brilliant!
Having to "kind of" do it with max-height, etc. is always not quite what you want.

[i_am_ergo]

What an awesome little niblet of knowledge. Thank you, Chris, Keith, and, of course, Kevin! Stay awesome.

[petarkolev]

The passion everyone can see with you're doing the videos with is priceless, that makes the videos even more valuable!

[rogerpence]

Kevin, your channel has been _extremely_ helpful to me. This technique is solid gold. Thank you!

[wxbfqtd]

This is absolutely amazing! I was struggling with this issue for a while. This solution is amazingly creative and simple. Thank you <3

[KeithGrant]

Hey Kevin, thanks for the shout-out! I’m glad you’re as excited about this as I am 😄

[DrewLytle]

Absolute *game changer!!!* Great video Kevin!

[p_o_z_e]

Totally forgot about this video and came across it again just now since i was on the lookout for exactly this, since i need it for a project. Amazing as always Kevin!

[nephiw]

I was so happy to see this when you first published it and I just used it again today. As a matter of fact, I made it a collection of helper classes that I can apply to anything and I plan to replace all of my collapsible blocks with this.

[bkgyswb]

I have searched for this effect for so long but always ended up with some compromised version. It works like charm! Thanks you for sharing.

[artemeelemann]

Been struggling with this for years, thanks for sharing such an easy solution!

[charlesst-yves]

Finally it has been done. Congrats on this acheivement!🏆and thanks for sharing.

[wzt]

Man I love the way you are so so happy about it. Thanks for the video.😊

[AmrouBouaziz]

Man ! you saved the day!
I remember watching this video as it was released, and today I came back to watch it again because I had the same use case.

[danielosthues]

Wow - I love this. It saves me lots of code to build a more / less toggle and it's the most straight-forward solution I've seen so far.

[morphx]

Just today I got assigned a task to implement an FAQ where you see the question and, upon clicking on it, the answer gets revealed, with a nice expanding animation. Lucky me, I watched your video before implementing it!

Thank you, Kevin!

[JmenDem]

Thank you! You are the best! I've been looking for sth like this for about 7 years!🎉🎉🎉