A look at how we can make a dynamic, responsive grid using CSS, along with a dive into properties l like aspect-ratio, object-fit, and more.
🔗 Links
✅ The GitHub repo: https://github.com/kevin-powell/dynamic-grid-layout
✅ Andy Bells CSS reset: https://piccalil.li/blog/a-modern-css-reset/
✅ My Emmet video: https://www.youtube.com/watch?v=EhRPdUv1ZrA&list=PL4-IK0AVhVjN44btac-akPhKcU46Z5H-C&index=2
✅ The easy way to get started with CSS grid: https://www.youtube.com/watch?v=rg7Fvvl3taU&list=PL4-IK0AVhVjN44btac-akPhKcU46Z5H-C&index=3
✅ About object-fit: https://www.youtube.com/watch?v=6yAAV-uP0po&list=PL4-IK0AVhVjN44btac-akPhKcU46Z5H-C&index=6
✅ Auto-fit vs Auto-fill: https://www.youtube.com/watch?v=qjJR3qYCd54&list=PL4-IK0AVhVjN44btac-akPhKcU46Z5H-C&index=4
✅ More about aspect-ratio: https://www.youtube.com/watch?v=FF3fuYLnApQ&list=PL4-IK0AVhVjN44btac-akPhKcU46Z5H-C&index=6
⌚ Timestamps
00:00 – Introduction
01:01 – Writing the HTML
04:57 – Setting up a basic grid
06:39 – Styling the cards
07:23 – Using aspect-ratio on the images
10:03 – Stacking content with grid
13:01 – Styling the card content
14:03 – Adding aspect-ratio to the cards
18:52 – Making the grid dynamic with auto-fit
22:31 – Creating a featured card
25:59 – Styling the featured card
28:49 – Fixing things for small screens
#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!
source
