👉 Start writing CSS with confidence: https://thecascade.dev/courses/css-demystified/?utm_source=youtube&utm_medium=social&utm_campaign=regular-video

🔗 Links
✅ Code from this video: https://codepen.io/editor/kevinpowell/pen/019daad5-af9a-7abd-8f10-c80f0983ddee
✅ CSS Day: https://cssday.nl/
✅ Web you want (free conference!): https://the-web-you-want.org/

✉ Keep up to date with everything I'm up to  https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@kevinpowell/join

---

🧑‍💻 My editors:
In most videos, I’m using CodePen these days: https://codepen.io/ - with High Contrast Dark theme and the font Commit Mono
And if not CodePen, then I’m probably using Zed: https://zed.dev/ with the theme Ayu Dark, and the font ZedMono
In older videos, I was using VS Code - https://code.visualstudio.com/ with the theme One Dark Pro Var, and the font Cascadia

---

⌚ Timestamps:
00:00 - Intro
01:15 - the problem with media queries
02:00 - defining a container
02:30 - using a container query instead
03:00 - changing the unit to create a content-first breakpoint

---

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:

Bluesky: https://bsky.app/profile/kevinpowell.co
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!

#css

Kevin Powell

Using CSS container queries with the `ch` unit instead of arbitrary pixel or rem values creates content-aware breakpoints. When a three-column layout is set to break at 90ch, each column is roughly 30 characters wide — aligning with minimum readable line-length guidelines. Unlike media queries, container queries respect the element's own font size, so breakpoints adapt automatically when the base font size changes. This approach replaces magic numbers with meaningful, content-first breakpoints.

No more magic numbers for your breakpoints