Тёмный

3 underused CSS Grid features 

Kevin Powell
Подписаться 939 тыс.
Просмотров 30 тыс.
50% 1

Опубликовано:

 

8 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 49   
@Ragnar_Oock
@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
@KevinPowell Месяц назад
One of these days 😂
@roryhendrickson
@roryhendrickson Месяц назад
I had no idea you could use absolute positioning along with grid, great tip!
@kaustavroy6542
@kaustavroy6542 Месяц назад
Awesome tips and trick. loved all of them
@KOBE42__
@KOBE42__ Месяц назад
Awesome video as always Kevin! Just checking, so do absolutely positioned items in a grid become grid-items themselves?
@KevinPowell
@KevinPowell Месяц назад
Great question! If the grid container is positioned, I guess so, yes, but I'd have to look at spec
@robertsundblad7061
@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.
@kopilkaiser8991
@kopilkaiser8991 Месяц назад
I am really constantly improving my knowledge in CSS Grid. It is vast and diverse.
@d18517
@d18517 Месяц назад
Great video, thanks. Really useful - I love the grid videos. And the new theme is good too!
@MrBlaq
@MrBlaq Месяц назад
Another awesome advanced tutorial! Keep'em coming and Thank you!
@clevermissfox
@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 ✨️
@ROL4ND-CSS
@ROL4ND-CSS Месяц назад
This again an awesome video with the true powers of css grid. Thanks Kevin for these clear and good examples! 😊
@KevinPowell
@KevinPowell Месяц назад
Thanks Roland!
@sovereignlivingsoul
@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.
@ricorobinson
@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
@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.
@lomavatatechfiji3237
@lomavatatechfiji3237 Месяц назад
thank you bro from Fiji
@PicSta
@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?
@bopuc
@bopuc Месяц назад
You consistently make 1999 web designer me cry. (Thank you!)
@jasonatcuriousmedia
@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.
@quark2012
@quark2012 Месяц назад
Awesome! This was really useful.
@bobmarteal
@bobmarteal Месяц назад
The absolute positioned items in grid areas is bonkers.
@tgd-y3x
@tgd-y3x Месяц назад
Great tips. Thanks.
@gknt7234
@gknt7234 Месяц назад
The implementation of CSS can initially appear perplexing and counterintuitive, seeming more like a clever workaround than a straightforward feature.
@pixiedev
@pixiedev Месяц назад
That's awesome I didn't know that 😄 we can do this 💪.
@vilijanac
@vilijanac Месяц назад
wow, I learned a lot new stuff about CSS. Thanks for showing.
@lemapp
@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
@KevinPowell Месяц назад
Not with how I'm animating this, but if I had only animated the image, then yes
@detore
@detore Месяц назад
you say don't animate your fr's, but your 0 to auto video you link to... is animating fr's???
@geHuC
@geHuC Месяц назад
isn't it transitioning not animation?
@BrunoNeureiter
@BrunoNeureiter Месяц назад
I didn't really understand or remember anything but it's a nice introduction
@RickBeacham
@RickBeacham Месяц назад
How would we animate the SVG car to move behind the transparent image?
@SandroWalach
@SandroWalach Месяц назад
Grid doesn't need to Flex!
@OCEMTechZone
@OCEMTechZone Месяц назад
🎉
@vfxcraftacademy
@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 ❤
@tsdineshjai8565
@tsdineshjai8565 Месяц назад
can you kindly provide the codepen link for this ?
@WERWOLION
@WERWOLION Месяц назад
expand the topic Custom HTML Tags Custom HTML Tags
@backup_hdd
@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
@backup_hdd Месяц назад
except for top/left/… of course, but i think you could've used margin for that, right?
@justdude2599
@justdude2599 Месяц назад
What vscode theme you use? thanks
@toshitsingh7270
@toshitsingh7270 Месяц назад
Grid itself is underused
@ukyo6195
@ukyo6195 Месяц назад
🤯
@_zer09_
@_zer09_ Месяц назад
one dark pro?
@DesignCodeToken
@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.
@sujonshekhbd
@sujonshekhbd Месяц назад
hello css boss
@KevinPowell
@KevinPowell Месяц назад
👋
@anion155
@anion155 Месяц назад
“Another tip is z-index” no you don’t…
@ALCATRAAAZZ
@ALCATRAAAZZ Месяц назад
godamn I said goddamn!
Далее
Learn CSS Grid the easy way
37:04
Просмотров 903 тыс.
Write less code with these 5 CSS tips
15:38
Просмотров 46 тыс.
A new approach to container and wrapper classes
25:27
Просмотров 257 тыс.
Why More People Dont Use Linux
18:51
Просмотров 183 тыс.
Please stop using px for font-size.
15:18
Просмотров 153 тыс.
The Unreasonable Effectiveness Of Plain Text
14:37
Просмотров 600 тыс.
23 CSS features you should know (and be using) by now
31:31
How to take control of Flexbox
16:01
Просмотров 132 тыс.
We can now transition to and from display: none
21:20
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 82 тыс.