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!
Learn how to create a responsive CSS grid layout
Теги
Kevin Powellcssfront-endfrontendhtmltutorialcss gridcss grid cardsgrid tutorialdynamic gridcss auto-fitgrid auto-fitminmaxminmax()how tolearn how tolearn csscss grid tutorialcss grid layouthow to use css gridlearn css gridgrid layout csscss grid layout tutorialresponsive css grid layoutresponsive css gridcss grid image galleryaspect-ratiocss aspect-ratio