Learn CSS Grid the easy way
It can be easy to get bogged down in how grid works, with a lot of new properties, values, and even units! So let's try and simplify things as much as possible, because to get started, you don't need to know *everything* about how Grid works.
🔗 Links
✅ The GitHub repo: https://github.com/kevin-powell/learn-grid-the-easy-way
✅ More videos on grid: https://youtube.com/playlist?list=PL4-IK0AVhVjM41-Ezm5tmESVchNEi7aZU
⌚ Timestamps
00:00 - Introduction
01:01 - How we're approaching this
02:01 - What we are working on
02:39 - What we are starting with
03:08 - Declaring display grid
03:59 - The gap property
04:47 - Use your grid inspector
06:06 - How many columns do you need
06:59 - You probably don't need to declare rows
12:48 - Spanning columns
15:09 - Placing things in specific places on your grid
17:52 - Working with line numbers
24:56 - Working with media queries
28:21 - grid-template-areas
35:38 - auto-columns and rows
#css
--
Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell
---
My editor: VS Code - https://code.visualstudio.com/
---
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.
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Видео Learn CSS Grid the easy way канала Kevin Powell
🔗 Links
✅ The GitHub repo: https://github.com/kevin-powell/learn-grid-the-easy-way
✅ More videos on grid: https://youtube.com/playlist?list=PL4-IK0AVhVjM41-Ezm5tmESVchNEi7aZU
⌚ Timestamps
00:00 - Introduction
01:01 - How we're approaching this
02:01 - What we are working on
02:39 - What we are starting with
03:08 - Declaring display grid
03:59 - The gap property
04:47 - Use your grid inspector
06:06 - How many columns do you need
06:59 - You probably don't need to declare rows
12:48 - Spanning columns
15:09 - Placing things in specific places on your grid
17:52 - Working with line numbers
24:56 - Working with media queries
28:21 - grid-template-areas
35:38 - auto-columns and rows
#css
--
Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell
---
My editor: VS Code - https://code.visualstudio.com/
---
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.
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Видео Learn CSS Grid the easy way канала Kevin Powell
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![A deeper look at the code behind a @Hyperplexed video](https://i.ytimg.com/vi/qa1Vmykbj20/default.jpg)
![CSS shorthands aren't always worth it](https://i.ytimg.com/vi/iTps-EehgKc/default.jpg)
![Awesome filtering animation with vanilla JS!](https://i.ytimg.com/vi/jZiZs8cZAKU/default.jpg)
![Keeping up with CSS: The features released in 2023](https://i.ytimg.com/vi/LGRogkgRrOs/default.jpg)
![Select all siblings of an element using :has()](https://i.ytimg.com/vi/Ue3VUsZwAJ0/default.jpg)
![This flowchart will help you pick the right CSS unit](https://i.ytimg.com/vi/Utc_uhvTluk/default.jpg)
![Use these instead of vh](https://i.ytimg.com/vi/ru3U8MHbFFI/default.jpg)
![CSS animation trick with rotated items](https://i.ytimg.com/vi/v1xTutQxspo/default.jpg)
![CSS animation keyframe tips](https://i.ytimg.com/vi/vYAYrnNrZqA/default.jpg)
![7 ways to center with CSS](https://i.ytimg.com/vi/7I6pb2MHRQg/default.jpg)
![How flexbox and grid are like owning different types of shoes](https://i.ytimg.com/vi/PcINEK4rkp0/default.jpg)
![A CSS feature most people don't know about](https://i.ytimg.com/vi/66Ouwg8fXL0/default.jpg)
![Simplify your code with this underused pseudo-class](https://i.ytimg.com/vi/wk79huqm1h4/default.jpg)
![The easy way to make sense of complex selectors](https://i.ytimg.com/vi/J6UNEh5pAJ4/default.jpg)
![The border-radius feature most people don’t know about](https://i.ytimg.com/vi/E0UfGiLvvpI/default.jpg)
![Is this the strangest CSS solution out there?](https://i.ytimg.com/vi/X5wu2p-trEk/default.jpg)
![Why Gradients can be better than SVGs for patterns](https://i.ytimg.com/vi/s7ovHgZpmGg/default.jpg)
![How to get started with VS Code](https://i.ytimg.com/vi/EUJlVYggR1Y/default.jpg)
![The scrollbar control you didn’t know you needed #css](https://i.ytimg.com/vi/ZFhPGfLfSa8/default.jpg)
![Do you make this mistake with border-radius? #css](https://i.ytimg.com/vi/D0lIR1qVJOk/default.jpg)
![5 Responsive Layouts in 60 seconds](https://i.ytimg.com/vi/GLB-JTYfa8M/default.jpg)