Container Queries are going to be a game changer!

I think container queries easily have the potential to be as big of a game-changer as flexbox was back in the day. They are going to change the way we approach creating layouts. The proposal by Miriam Suzanne build on top of David Baron’s, and is what is currently being implemented into Chrome Canary (behind a flag), so a huge thank you to her for being at the forefront of making this actually happen! //////////// UPDATE /////////// If you want to try them out, the contain property now has a new requirement, with the `style` value. `contain: layout style inline-size;` ////////////// ** If you'd like to react to certain aspects, or suggest changes to this proposal ** The proposal currently lives in a GitHub Repo where you can keep track of its progress, as well as make contributions to as well! This is really early days, and they are looking for feedback, issues, and ideas to help move it forward! https://github.com/w3c/csswg-drafts/i... 🔗 Links ✅ Chrome Canary:https://www.google.com/intl/en_ca/chr... ✅ Miriam Suzanne's proposal: https://github.com/w3c/csswg-drafts/i... ✅ Miriam Suzanne's explainer: https://www.miriamsuzanne.com/2021/05... ✅ A Primer On CSS Container Queries: https://www.smashingmagazine.com/2021... ⌚ Timestamps 00:00 - Introduction 01:36 - Enabling container queries in Chrome Canary 03:00 - Looking first at media queries 04:23 - When container queries enter the picture 05:25 - The contain property 07:26 - Creating a container query 09:14 - Updating our HTML to ensure we have a direct child to look at the container 10:57 - Changing our card layout within a container query 13:49 - Adding a container query to our aside #css -- Come hang out with other dev's in my Discord Community 💬   / discord   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! 📺   / kevinpowellcss   --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-t... 💖 Support me on Patreon:   / 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:   / 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!