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 — #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 — — 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: ✅ Steph’s SmolCSS Breakout: #smol-breakout-grid ✅ Ryan’s Layout Breakouts with CSS Grid: ✅ Steph’s newsletter: ✅ Getting started with CSS grid: ⌚ 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 💬 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!