3 underused CSS Grid features

[@roryhendrickson]

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

[@kaustavroy6542]

Awesome tips and trick. loved all of them

[@KOBE42__]

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

[@KevinPowell]

Great question! If the grid container is positioned, I guess so, yes, but I'd have to look at spec

[@d18517]

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

[@ModMySelf18]

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)

[@robertsundblad7061]

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.

[@MrBlaq]

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

[@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?

[@ROL4ND-CSS]

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

[@KevinPowell]

Thanks Roland!

[@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.

[@KevinPowell]

One of these days 😂

[@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

[@DocGenius42]

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.

[@quark2012]

Awesome! This was really useful.

[@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.

[@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 ✨️

[@DocuFlow]

Quality stuff!

[@tgd-613]

Great tips. Thanks.

[@sovereignlivingsoul]

as for the row movement in the animation, perhaps putting the animation container in a container and give the parent a transparent background, shouldn't affect anything outside of the parent

[@Sofia-ts6gy]

Position absolute still allowing you to align the item according to grid lines literally made me think “god i wish i could do that in figma autolayout” lol.

[@bobmarteal]

The absolute positioned items in grid areas is bonkers.

[@gknt7234]

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

[@pixiedev]

That's awesome I didn't know that 😄 we can do this 💪.

[@RickBeacham]

How would we animate the SVG car to move behind the transparent image?

[@bopuc]

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

[@backup_hdd]

wait, i'm confused. did you even need the position absolute for the car icon? like, wouldn't setting the grid-column/-row alone have the same effect?

[@backup_hdd]

except for top/left/… of course, but i think you could've used margin for that, right?

[@nabilpatel970]

Great video 🔥 Just want to mention that the driver looks like Tom Holland 😂

[@tsdineshjai8565]

can you kindly provide the codepen link for this ?

[@justdude2599]

What vscode theme you use? thanks

[@lemapp]

Could you use, "CSS -- overflow: hidden;" to make the image float up and down and not subject lower layout items to unnecessary movement?

[@KevinPowell]

Not with how I'm animating this, but if I had only animated the image, then yes

[@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.

[@kopilkaiser8991]

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

[@MrCC-hx8xr]

Demo pls? Kevin?

[@vilijanac]

wow, I learned a lot new stuff about CSS. Thanks for showing.

[@DesignCodeToken]

I send email to you for BeyondCSS course, but get no reply, how can I get in touch with you. Sorry to comment here, but really don’t know how I can get it touch with you.

[@detore]

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

[@geHuC]

isn't it transitioning not animation?

[@SandroWalach]

Grid doesn't need to Flex!

[@vfxcraftacademy]

Hii Kevin I join company as intern and I learn bootstrap 5 because we work on that and make website full responsive on every single website ...but I stuck and can't figure out how I can write smooth code with responsive using media query ....so can you make video on that ..... Please reply my question... Love from india ❤

[@_zer09_]

one dark pro?

[@OCEMTechZone]

🎉

[@toshitsingh7270]

Grid itself is underused

[@lomavatatechfiji3237]

thank you bro from Fiji

[@BrunoNeureiter]

I didn't really understand or remember anything but it's a nice introduction

[@ukyo6195]

🤯

[@WERWOLION]

expand the topic Custom HTML Tags Custom HTML Tags

[@sujonshekhbd]

hello css boss

[@KevinPowell]

👋

[@ALCATRAAAZZ]

godamn I said goddamn!

[@anion155]

“Another tip is z-index” no you don’t…