Kevin Powell simplifies CSS Grid by focusing on the essential properties needed to build layouts without getting bogged down in complexity.
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: github.com/kevin-powell/learn-grid-the-easy-way
✅ More videos on grid: youtube.com/playlist?list=PL4-IK0AVhVjM41-Ezm5tmESVchNEi7aZU
⌚ Timestamps
- Introduction
- How we're approaching this
- What we are working on
- What we are starting with
- Declaring display grid
- The gap property
- Use your grid inspector
- How many columns do you need
- You probably don't need to declare rows
- Spanning columns
- Placing things in specific places on your grid
- Working with line numbers
- Working with media queries
- grid-template-areas
- auto-columns and rows
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: patreon.com/kevinpowell
---
My editor: VS Code - 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: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: 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!
Why it's here
4 people recommend this
What people say. Recommended as an excellent, in-depth yet easy-to-follow tutorial on CSS Grid.
L
u/Lncr1259in r/Frontend • Recommends
On “How to become a CSS positioning master???”
For flexbox I spent a good amount of time on Flexbox zombies. I don't think it's as well know as something like flexbox froggy or grid garden, but it's very helpful. It's a long game/tutorial, but it covers everything you'll want/need to know about flexbox.
For grid I'd recommend any YouTube videos by Jen Simmons. They are long and not in a typical tutorial format but very insightful. I would start with the "Basiscs of CSS Grid" video. If that's not you style, Kevin Powell also has good content on grid.
For positioning I started with the tutorial on the Web Dev Simplified channel.
Fireship has a tutorial which directly mentions the advantages of using CSS Grid over Bootstrap and how to set up the css to behave like Bootstrap: link to this video
But I also suggest a more in depth tutorial like this one from Kevin Powell who has great explainers: link to this video
On “Terrible in web design.. How could I create my idea?”
…e styled it’s just a design system with widgets/elem
If you want to style them youself (which I totally recommend, the amount of coworkers that think they know css relying on frameworks is damn high!) it will take you time but it's totally worth it.
Start looking at grid as they said.
https://css-tricks.com/snippets/css/complete-guide-grid/
[video
You can also use flex containers to build it, just having few of them.
Do you want it to be mobile friendly? Start implementing mobile, it will be easier as all the content will stack above the other. Make your way to make it look good when de screen looks bigger.
At the time of implementing the markup you should do it based on desktop,…
