A new approach to container and wrapper classes

Kevin Powell demonstrates how to use CSS Grid to replace traditional container and wrapper classes, allowing for easy full-bleed breakouts.

The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and then had my idea validated when I found an article by Ryan Mulligan — ryanmulligan.dev/blog/layout-breakouts/ — exploring that same idea! So in this video, I take a look at how we can set it all up. I won’t lie, it’s a little complex, but I think the payoff is worth it, and I’d also love to know what you think! 🔗 Links ✅ Finished code: codepen.io/kevinpowell/pen/ExrZrrw ✅ Steph’s SmolCSS Breakout: smolcss.dev/#smol-breakout-grid ✅ Ryan’s Layout Breakouts with CSS Grid: ryanmulligan.dev/blog/layout-breakouts/ ✅ Steph’s newsletter: thinkdobecreate.com/newsletter/ ✅ Getting started with CSS grid: youtu.be/rg7Fvvl3taU ⌚ Timestamps 00:00 - Introduction 01:07 - What we could have instead 02:35 - Inspiration for this idea 03:45 - Setting up the grid with named lines 06:30 - Adding a breakout to the grid 08:45 - Adding a full-width to the grid 14:42 - Improving the column sizes #css -- Come hang out with other dev's in my Discord Community 💬 discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! 📺 twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: kevinpowell.co/courses 👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome 💖 Support me on Patreon: patreon.com/kevinpowell --- My editor: VS Code - 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: twitter.com/KevinJPowell Codepen: codepen.io/kevinpowell/ Github: 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!