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!
Hide player controls
Hide resume playing