3 underused CSS Grid features

Grid is awesome, and there are some neat tricks that you can do with it that I don’t see enough people taking advantage of, like overlapping named grid lines, using position absolute with grid, and animating template-rows and template-columns.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:45 - How to overlap grid areas using named grid lines
04:50 - 3 bonus tips
07:00 - Using position absolute with grid
10:25 - Animating grid-template-rows and columns

#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!

[roryhendrickson]

I had no idea you could use absolute positioning along with grid, great tip!

[Ragnar_Oock]

this video would have been a great way of showcasing the `grid-template` shorthand. it makes the whole "defining the grid" a lot more visual and you don't need the weird `grid-template-area: unset` because the shorthand overrides it for you.

[ModMySelf]

Just to let you know to the animated fr thing at 13:28, but it is possible to make a transition between fr. I "animate" my accordions like this. Open accordion has a 1fr child (the content) and closed 0fr, with overflow hidden it works like a charm :) (probably you already know, but wanted to let all the other people know that)

[kaustavroy]

Awesome tips and trick. loved all of them

[KOBE__]

Awesome video as always Kevin! Just checking, so do absolutely positioned items in a grid become grid-items themselves?

[robertsundblad]

I need all of these Grid-videos tog get my brain about learning them.

And yes, I like the new theme! Was thinking I wanted it for my own IDE.

[d]

Great video, thanks. Really useful - I love the grid videos. And the new theme is good too!

[kopilkaiser]

I am really constantly improving my knowledge in CSS Grid. It is vast and diverse.

[MrBlaq]

Another awesome advanced tutorial! Keep'em coming and Thank you!

[clevermissfox]

Transitioning w the fr unit- i know ive transitioned rows from 0fr to 1fr but im curious what the exact constraints are if 50px to 1fr didnt work correctly. Or maybe mine just looks like it works and it wouldnt be able to do a reverse infunite animation 🤔

Love the grid series! Wonder if subgrid appreciation month is coming again ✨️

[ROLND-CSS]

This again an awesome video with the true powers of css grid. Thanks Kevin for these clear and good examples! 😊

[ricorobinson]

Great tips, being able to play with layouts like this is fantastic compared to the css layout mud wrestling we had to do 10 years ago

[PicSta]

Great video as always. Really love your videos and watch them as they come out. I like the new theme, which one is it? Or custom?

[sovereignlivingsoul]

great video, grid is amazing, i am trying to incorporate grid lines more in my coding practices, difficult to find the right combination sometimes if the page gets too busy, or if trying to do in such a way as to avoid @media or @container type coding.

[DocGenius]

Since you mentioned it at the end: transitioning from 0fr to 1fr doesn't seem to work anymore in FireFox (it did before). I have to change 0fr to 0 in order for my Accordion to function properly which ofcourse means that it will jump between those values now.
Haven't tested if the latest release fixed that, but I doubt it.

[gknt]

The implementation of CSS can initially appear perplexing and counterintuitive, seeming more like a clever workaround than a straightforward feature.

[jasonatcuriousmedia]

Absolute positioning of the grid item in conjunction with grid-columns / grid-rows only works if the grid container is position relative (or absolute or fixed). Unfortunately, this nuance appears to have been skipped in the video entirely.

[detore]

you say don't animate your fr's, but your 0 to auto video you link to... is animating fr's???

[bobmarteal]

The absolute positioned items in grid areas is bonkers.

[bopuc]

You consistently make 1999 web designer me cry. (Thank you!)