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)
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.
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.
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.
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.
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 ✨️
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
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.
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 ❤
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.
I had no idea you could use absolute positioning along with grid, great tip!
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)
Awesome tips and trick. loved all of them
Awesome video as always Kevin! Just checking, so do absolutely positioned items in a grid become grid-items themselves?
Great question! If the grid container is positioned, I guess so, yes, but I'd have to look at spec
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.
Great video, thanks. Really useful - I love the grid videos. And the new theme is good too!
Another awesome advanced tutorial! Keep'em coming and Thank you!
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.
One of these days 😂
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
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.
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?
Awesome! This was really useful.
This again an awesome video with the true powers of css grid. Thanks Kevin for these clear and good examples! 😊
Thanks Roland!
Great tips. Thanks.
You consistently make 1999 web designer me cry. (Thank you!)
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.
The absolute positioned items in grid areas is bonkers.
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.
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 ✨️
Great video 🔥
Just want to mention that the driver looks like Tom Holland 😂
That's awesome I didn't know that 😄 we can do this 💪.
Quality stuff!
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
The implementation of CSS can initially appear perplexing and counterintuitive, seeming more like a clever workaround than a straightforward feature.
How would we animate the SVG car to move behind the transparent image?
What vscode theme you use? thanks
can you kindly provide the codepen link for this ?
Could you use, "CSS -- overflow: hidden;" to make the image float up and down and not subject lower layout items to unnecessary movement?
Not with how I'm animating this, but if I had only animated the image, then yes
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.
you say don't animate your fr's, but your 0 to auto video you link to... is animating fr's???
isn't it transitioning not animation?
Grid doesn't need to Flex!
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?
except for top/left/… of course, but i think you could've used margin for that, right?
I didn't really understand or remember anything but it's a nice introduction
I am really constantly improving my knowledge in CSS Grid. It is vast and diverse.
expand the topic Custom HTML Tags
Custom HTML Tags
wow, I learned a lot new stuff about CSS.
Thanks for showing.
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 ❤
🎉
Grid itself is underused
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.
thank you bro from Fiji
one dark pro?
🤯
hello css boss
👋
godamn I said goddamn!
“Another tip is z-index” no you don’t…