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:
âś… Andy Bells CSS reset:
âś… My Emmet video:
âś… The easy way to get started with CSS grid:
âś… About object-fit:
âś… Auto-fit vs Auto-fill:
âś… More about aspect-ratio:
⌚ 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
đź’¬
Keep up to date with everything I’m up to
✉
Come hang out with me live every Monday on Twitch!
đź“ş
---
Help support my channel
👨‍🎓 Get a course:
đź‘• Buy a shirt:
đź’– Support me on Patreon:
---
My editor: VS Code -
---
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:
Codepen:
Github:
---
And whatever you do, don’t forget to keep on making your corner of the internet just a little bit more awesome!