CSS Bits

CSS Saves for Later Use

Search

grid-template-rows - Transition from height 0 to auto with CSS only

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!
Video by https://www.youtube.com/@KevinPowell
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!
I was doing this with the columns the other day for a slide out panel, but for some weird reason I've never thought to go vertical! Thanks for the awesome content Kevin!
It's amazing just how happy this made me -- I'm just about done with a project where I had wanted to have this effect on the menu but had given up trying to find a non-horrible solution. Two minutes' work and it's done, looks perfect.
Omg this is awesome! I had to do an accordion in the job recently and had to use JS to calc the size of elements times their numbers to achieve the same effect.
I have been using the min-height hack for a while which was ok but was problematic since when you put a higher min-height it takes long time for the transition to complete, but this is just amazing, you are a wizard 🧙‍♂
This is sick! I was having a problem where the font sizes changes with breakpoints throwing away the height i calculated initially, this fixes and I don't have to worry about setting hard height values
Thats exactly what i wanted. I was struggling with the height auto issue in React, because auto won't trigger any css animation, making everything so awkward. Now you saved my life.
developer.mozilla.org - grid-template-rows
0:00
hi there my front and friends I actually
0:02
had some other video planned for today
0:03
but I'm too excited about figuring out
0:05
that we can animate or transition from a
0:08
height of zero to a height of Auto with
0:10
CSS and it's really easy to do so we're
0:13
going to look at how this is actually
0:15
possible how I figured it out and also a
0:18
more practical use case than the very
The setup
0:20
simple one we'll look at at the
0:21
beginning here
0:22
um but yeah this is this is really cool
0:24
so here I have this really quick example
0:27
and we just have a div here and then I
0:28
have this is amazing right there nothing
0:31
too fancy and what we're going to do on
0:33
this quick example is we're going to set
0:35
this to have a display of grid and we're
0:37
going to give it a grid template rows
0:40
and the rows are actually zero FR and
0:43
this should set the grid to be zero
0:45
height basically so we're getting to
0:47
that zero that we wanted but obviously
0:50
nothing actually changes here so we're
0:51
going to go into that quick example
0:53
we're going to grab that child that's
0:54
there so we can grab the the div so
0:58
we're taking this guy which actually has
1:00
that height of zero because it's
1:02
following this the problem is the
1:04
content is overflowing so we can give
1:06
that a overflow of hidden and just like
1:08
that we're two where we want to start
1:10
with which is fantastic
1:12
then we just take whatever method you
1:15
want to be able to transition to
1:16
something so often you'd probably be
1:17
using some JavaScript or something to
1:19
toggle this or whatever but let's do it
1:21
the simple one here which is just going
1:23
to be a quick example hover because it's
1:26
the easiest way to do something for
1:28
demos like this and we're just going to
1:30
say that when we hover it we're going to
1:32
have our grid template
1:34
Rose and it's going to be a 1fr and one
1:37
FR just means take up the space you know
1:39
the natural space that you'd already be
1:41
taking up and you would divide it evenly
1:43
if there was multiple rows but we only
1:45
have one row right here so then if I
1:48
hover on top it goes like that now this
1:50
is normally what you'd be getting when
1:51
you would be transitioning from a zero
1:53
to an auto and you try doing your
The transition
1:55
transition but now grid template rows
1:58
and columns are animatable properties so
2:01
we can do a transition on our grid
2:04
template rows and the worst part about
2:06
this is that it's so long to write that
2:08
out but we get our grid template rows
2:10
let's just say 500 milliseconds and just
2:12
like that
2:14
it works it's fantastic I'm so happy
2:16
about this and you might be wondering
2:18
about like what if there's more content
It works with more content too
2:20
that's fine you can come here we could
2:21
say like lorem 100 and have a whole
2:23
bunch of text in there now this one is
2:25
nice and short and this one is a lot
2:27
longer and check that out it works super
2:30
well uh it goes a bit fast because we
2:32
have it at 500 Ms but you know it would
2:34
work and what if you needed a lot of
2:35
paragraphs well paragraph times four and
2:38
lorem and now if we come here now we
2:40
have four paragraphs that are all there
2:42
and it is just working and I'm going to
2:44
show you a bit more of a practical setup
How I discovered this
2:46
and use for this but just really fast I
2:48
actually heard about this from Chris
2:49
coyer a while back and I forgot how we
2:51
did it I could never actually get it to
2:52
work but then I found this blog post by
2:55
Keith J Grant which I will link to in
2:57
the description he actually looked at
2:58
how we can also do this with flexbox but
3:00
I much prefer the grid solution but a
3:03
big thank you to Keith for sharing this
3:05
because it's it's just great and it's so
3:08
easy to do and so if we go and jump over
Using it for an accordion
3:10
to this other code pen and all of this
3:11
is shared over there you can see that we
3:13
can do an accordion in with this and it
3:15
just works super super well it's pretty
3:17
awesome so yeah really nice I'm doing
3:20
the exact same trick I have my accordion
3:23
content here and then I have a div with
3:25
that paragraph so there it is then in
3:28
this other one that has more stuff in it
3:29
div with just more paragraphs and yes it
3:32
does mean you have to have this nested
3:34
div inside the parent if you don't like
3:36
just divs floating there for no reason
3:38
give it a class if you want to but you
3:41
know it works perfectly fine like this
3:42
and all I'm doing here is if we look in
3:44
here I have my content exactly like we
3:47
looked at the hidden just here instead
3:49
of using a hover I'm toggling an area
3:50
hidden that's false or true you could
3:52
just be doing this with a class instead
3:55
you know whatever is opened or something
3:57
depending on how you want to set things
3:59
up but yeah it's really just simple it's
4:02
easy to do and it just works which is
4:05
the best part of all of this so big
4:07
thanks to Chris for first sharing this
4:08
and then for Keith for re-sharing it to
4:10
remind me that this is possible and then
4:12
yeah I really hope you like this one and
4:13
this short format I just I just had to
4:16
share this I was super excited about it
4:17
but I got it working so here it is and I
4:20
look forward to seeing you the next time
4:21
but until then of course don't forget to
4:23
make your core on the internet just a
4:24
little bit more awesome