Myvideo

Guest

Login

Learn how to create a responsive CSS grid layout

Uploaded By: Myvideo
1 view
0
0 votes
0

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!

Share with your friends

Link:

Embed:

Video Size:

Custom size:

x

Add to Playlist:

Favorites
My Playlist
Watch Later