A new approach to container and wrapper classes

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-... - 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/Ex...
✅ Steph’s SmolCSS Breakout: smolcss.dev/#smol-breakout-grid
✅ Ryan’s Layout Breakouts with CSS Grid: ryanmulligan.dev/blog/layout-...
✅ Steph’s newsletter: thinkdobecreate.com/newsletter/
✅ Getting started with CSS grid: • Learn CSS Grid the eas...
⌚ 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
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / 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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / 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!

[@42pe]

I’ve been working in web dev for 20+ years, and this is one of the few times I’ve seen someone come up with an alternative to such a huge industry standard and actually offer a simpler, viable one. Kudos to you!

[@bryandenijs7661]

A while ago I had exactly this requirement to solve. Ended up with a lot of container elements and I hated it, but didn't know a better solution. This would have really helped me. I really like it and I don't think it is over-engineered at all. I think it's a very clean way without al those wrapper/container elements. Thanks for the inspiration!

[@ZimmervisionCZ]

Yeah I definitely prefer this over wrappers or containers, especially because I'm a bit opinionated that markup should be content. In my opinion, a wrapper div is a form of coupling between markup and style that is best avoided.

[@MayhemPhone]

Agreed. The hours, and hours of refactoring I’ve had to do when suddenly a designer adds a breakout element… my god. I would need to use this for a full project, and see how it holds up… but my gut says this is a really elegant solution to an often messy problem.

[@jcsilverx]

x2. It was already somewhat tedious, but this... solves the problem. =')

[@t3hpwninat0r]

print designers do this stuff all the time. so annoying for us web developers to code, but not any more!

[@BlackistedGod]

damn, I have been working with HTML/CSS for more than a decade and been looking for a solution like this. I'm the type of guy who wants to keep HTML structure as simple and short as possible.

[@FreeScience]

To be fair we haven't had grid (or flex-box) for that long :)

[@dom8429]

html structure should be as simple as possible (because it's what get's updated most). if that means we move the complexity into a long line of css that's an excellent trade-off! you always have complexity, the question is just *where* you put it. of course in some cases it makes more sense to have a quick max-width container instead of a robust and flexible solution like this. but it's really good to know this and be able to choose. thanks so much

[@Novacification]

This is one of the things that easily gets difficult with something like react. Component structure, especially when using component libraries, often adds a lot of DIVs to the DOM structure. You can avoid it nowadays but many developers who "grew up" with react don't give it much thought and add DIVs instead of fragments etc. It's also frustratingly common for people to leave DIVs around with conditional renders because they only wrap the DIV content in the condition, not the containing DIV itself.

[@simonced]

It is a complex solution, but it's the kind of solution you do once, then you can forget about it. That outweighs the complexity, and will improve clarity in the HTML, which is usually where it can get really messy. What a great solution, I'll try something like that in my next project, thanks for the idea!

[@Dead_Goat]

containers are for more clear than this...

[@bumbleguppy]

I started out in the XHTML era and the disciplined notion of a hard separation of the semantic html and style makes this nostalgically appealing. I can't see how this wouldn't be better for accessibility.

[@forbiddenera]

xHTML is alive and well and thus makes me cringe to see single quoted attributes. Also, container/wrapper divs aren't helpful for accessibility per se but you can make them ignored.

[@isaacpriestley]

I thought XHTML was gonna be the coolest thing in 2005. I loved the idea of really pure HTML.

[@VeitLehmann]

This is really neat! Until now, I only used named grid areas or no names at all. I didn't know that you could create nested named grid areas via named start/end grid lines. Thanks for the great demo, I love it! Easy to understand CSS, really easy to apply and work with in HTML, and every removed wrapper div is a good thing!

[@VilleTakanen]

As a person who also occasionally does paper layouts - I love this. It's a very analog approach to page grid ❤

[@AmyDePalma]

Really love this idea. So simple yet flexible. I'm working on a super-lightweight, non-framework-based set up for my company's sites and am super excited to play around with this! Thanks for taking your time.

[@adammarostica3016]

I absolutely love this! Set it up once and then you’re set. This is brilliant. Thanks, Kevin!

[@omgnowairly]

This is pure gold. For markdown formatting or user submitted content, this allows a new level of presentation.

[@doug7897]

Main thing I like about this over auto-margins is you can use justify-items to keep inline-block/fixed-width items aligned to the left/right of the content bounds, rather than stuck centered without a dummy wrapper.

[@RuneScapeZammy]

This fits exactly the kind of "exception" to over-engineering you defined in your talk at CSS Cafe, which I very much agree to. I can imagine this to be made even easier and more versatile with a postcss function or SASS mixin/function. The biggest benefit, besides wrapping, that I see, is to make it even easier to work with CMS content. You will just be able to use a class or even just define grid areas for certain content types and elements.

[@PicSta]

Never thought anything like this is possible. Very good approach and I don't see any issue using two classes for the same. Excellent tutorial, Kevin, keep up this good work. 😄

[@marymaundu1702]

Hey Kevin. Just want to say thank you so much because I have finally conquered responsive layouts and I'm super proud of myself but also so grateful for your course and guidance. I have finished the final challenge of conquering responsive layouts and I can now confidently create responsive sites. No longer dreading CSS but actually love it now.😅😊

[@janemig]

Being someone who is comfortable using containers/wrappers where needed, this seems like a cool new way to center your main content. I'll try it out and circle back! Thank you as always!

[@joshreynolds4164]

Love it, I found Ryan's version of this a few months back and it's been so useful. As you say, can kind of just drop into projects and update the variables as needed

[@zeddash]

What I love about web development is that there's always something to learn and each challenge is a puzzle. Never thought to use grid for this but as soon as you showed you were using grid I knew where this was going. This is a far better solution than using wrappers.

[@joaquingarcia7075]

Awesome, love it! The full width and the breakout are so needed in projects, and this is a clever way to get through them and not have to make a lot of CSS to get to the same result with a conventional container.

[@JasonDuerrPDX]

Elegant *and* flexible. I'll be swiping a handful of things from this one. Thanks Kevin! Great work as always.

[@jpmorse1982]

I am a newbie to frontend design and these videos are a massive help thank you. I am currently building a help webpage for work and spent hours aligning sections where I wanted but using this idea to simply name a section and it positions and look how I wanted. I recreated my webpage with this idea and it took just minutes to do. Granted most of that time was setting this up but overall much quicker.

[@abramthau558]

Kevin, I've watched a lot of your videos, and this is the first time I've felt compelled to comment because this is FREAKING. AWESOME. I will definitely be using this technique, plus I love the whole named lines to make implicit grid areas!

[@dqampire]

I was already using your grid in "how to escape from containers" video. This one is adds even more flexibility, love it!

[@NickHempsey]

I love this approach, we used something similar on a project when grid was just coming out, but it wasn't this clean. I'm looking forward to playing around with this further!

[@jhasani79]

This actually solved a problem I was working on. Thank you so much for this! And yes, it is a bit of a setup, but I think in the long-run it saves so much time and effort.

[@theomegamale5335]

This is going to make my life really easy with a platform i am developing right now. Im someone who hates extra html, so this succinct kind of approach is phenomenal. Great video !

[@matthiasploetz998]

This is a lovely idea. I agree with a comment below "unless a container/wrapper makes sense semantically ...". Always start with good HTML. What I really like about it is having only one major grid to put your UI elements into. You can create an overall consistent spacing strategy throughout your page. I wonder though if most of the time it only ends up being a starting point and you end changing the grid multiple times before you are done. I guess it saves designers jobs if the web developer community all use the same one-column layout with 60 to 90ch max-width content. It should make more interesting grid layouts stand out even more.

[@mvonballmo]

This was fantastic. Thank you very much. Really a tight tutorial, with just enough "mistakes" to show how you built it up. Not over-engineered at all. It's just as complex as needed, and no more. Responsive without media queries. Complexity hidden in the CSS. Even the CSS is reasonably legible. You could maybe use an extra variable to clean it up, but otherwise, great.

[@thomasw.enderle6565]

Love this. No need to play around with negative margins and stuff to breakout of a container. I think this makes so much sense!

[@tictac1020]

Excellent stuff, Kevin. Have taken a break from front of the front end stuff for a bit and am jumping back in and seeing what I've missed. Glad to see you are still bringing the light of CSS to the masses.

[@alirahmani5601]

I'm definitely gonna explore this. I'm a big fan of CSS over HTML, so I'm willing to write more CSS to avoid repeating myself in HTML by cluttering my markup with many classes!

[@tonyr.6637]

CSS was invented to avoid *exactly* this kind of HTML clutter. You are helping it fulfill its destiny! 🔮

[@sofocused7767]

Excellent solution. Everytime I watch I go and rewrite my css. This is just golden! Super simple to copy and paste to other projects as well.

[@MayhemPhone]

Imo, it moves all the complicated bits into one spot, and massively simplifies everything else that is implemented. if I joined a project where all I had to do was add a breakout class on something, I’d sob with joy. Bravo.

[@aje9633]

this one is a lifesaver.!!! Literally, it got my mind blown that this could be possible.

[@Akshatgiri]

Love it. This finally allows us to keep our html only to the markup that actually contains the content instead of having to create unnecessary boxes just for a simple layout.

[@MultiWar22]

I love this. I actually need this for a current project, and I was procrastinating doing that because I was thinking that there has to be a better way than just wrapping things. So thanks! I'll put it to use tomorrow

[@visuellegedanken]

I just love how happy this solution is making you. I'm very intrigued because I definitely feel the .wrapper pain. I'll give it a test run as soon as I start a new project.

[@maxfri6680]

This is such a clean solution. 😱 Also because grids are perfect tools for animations with fr units and using this layout will open up a lot of possibilities. Thank you for sharing!

[@pythagoran]

man, several of your recent videos made me stop and have to update my existing projects because the advice and benefits are so extraordinary! i no longer need to keep up to date with recent front end developments when i can just watch this guru right here :)

[@MichaEl-rh1kv]

Perfect. Far more clean than those wrapper divs, and also perfect versatility, easy responsiveness, one-place-does-it-all for multiple projects,... Thank you!

[@jshstuff]

I also came up with this same strategy on my own and have been applying it to redesigns of some major sites because I love it so much. A few weeks ago I pasted my version under your video about escaping a container on only one side - when you made the teaser community post I actually thought you got the idea from me since I'd never seen anyone do this kind page layout and I'd just shared my code like 2 days earlier, but I guess it's humbling to hear that people discovered the same thing over a year ago :)

[@kobi-kobsen]

There is really nothing wrong with containers, but this is just so much nicer. I still did not use grid, but as I watch your video I start changing my own little framework now. Thank you!

[@simondann7371]

I have serendipitously stumbled upon your video at the very time I needed it; thank you!

[@leobetosouza]

Thank you for it. I've hated containers and wrappers for 15 years.

[@Adlore]

I love this solution. I've never used much of grid, but the abiliy to remove a bunch of wrapper divs seems great, and it solves a pet peeves of mine. The cleanliness of the html is a nice result

[@thegeneralyst]

I think this is the next step to containers, while it does take a lot to setup it allows for complete control over how you want the containers to work and will save you a lot of time in the long run. I am definitely using this.

[@HeyDanThomas]

Love this! I've thought for years there should be a less divitis way to achieve these things. Thanks for sharing.

[@SebastianZartner]

Great to see you finally talking about named grid lines (as I suggested that topic earlier). I believe they have great potential, though are very underused, at the same time, because they are a little hard to understand, at first. I really like your idea of defining breakouts with them! Having said that, it would have been great to compare it with the subgrid solution.

[@ofcljaved]

I absolute love it, It's a masterclass and it will take 2-3 rewatch to understand it but it'll help in long run

[@vitaliilabunets6193]

Awesome! Thnx for step by step exploration. Definitely useful staff

[@Bodom1978]

Was going to dismiss this video but glad I watched it. Had not idea that I could do that with the grid section names. Very useful feature. Thanks for sharing 😊

[@BrandonLaDuke]

That's a great idea. I was actually trying to come up with something similar to that on a current project. But couldn't figure out an easy way to make it responsive. I never knew about the named start/end of grid areas. That's going to be very helpful!

[@xbsidesx]

I tried to do this kind of thing so many times. This is very elegant and readable (even being a line long). Thank you for this. Oh and I don’t know which solution I prefer but I think I’d end up with the 2nd (Redeclare) because it makes more sense to me.

[@melissafrasik9272]

I am absolutely FLOORED by this method! I've been working through a project that implemented the full color background sections, much like your above example, but the number of wrapper divs required have been frustrating me endlessly. Although I've been using grid for years, I never realized you could name lines like this! This is such a beautiful, clean implementation! I also have a horrible habit of forgetting padding on the X axis until the very end, and this even fixes that! I would happily take a chunky grid boi over extra divs any day! Thanks for this video!

[@palmpixiplus]

This is awesome! I've mostly been using flex because grid never really 'clicked' for me. But now it's starting to make more sense. I also found that I could do sub-columns by adding more template areas and using nth child to put things in the right sub-column. ( For example, putting a thumbnail next to a half width column ).

[@JohnDoe-jc4xp]

❤ this solution, I want to go back to my old projects in retrofit this into them. 😮

[@JoseMVelazquez]

Anything that reduces the excesive use of container divs we see these days is a welcome change for me.

[@cubbucca]

love how this covers every screen size without the need for @media

[@gerrcassytb]

love the idea. It seems like that kind of things you only need to get used to. Less wrappers also sounds like a good idea. Thank you.

[@iskimo01]

You just made me rethink the whole concept of grids!

[@senorverano]

Ok, I think this is indeed awesome. Especially since the flow of the document doesn't get interrupted as much as it does with the container/wrapper way of doing it!

[@nomadshiba]

i think this is great the naming the columns part is whats new to me makes me wanna play around with it

[@NikolaFilipovski94]

It is a bit complicated to set it up, but like you said, from project to project just copy/paste and eventually change custom properties, it's actually really good to use. Definitely will play with it a little bit :)

[@wecm8991]

I always thought that it won't hurt to use wrappers or containers if they make my life easier. But this solution is just awesome! Thanks for sharing!

[@jcsilverx]

This is exactly what I was looking for! Thank you so much!

[@dasten123]

I didn't know you could define grid areas like that, that is a super neat trick!

[@codcut]

I was just doing some crazy stuff just to be able to breakout some parts of the content. Now I'm redoing everything because of you!

[@MattPriour]

Really love this approach! Thanks for showing it.

[@marcofante]

This is a GREAT way to handle dynamic components retrieved let's say from a CMS, leaving the editor full choice over the design, while keeping a smaller markup footprint, I like it!

[@nickbrown6754]

I love this approach. I recently worked on a project where the designer had numerous column width / container sizes. This would have worked so well as I would have been able to set all container sizes to one grid layout instead of numerous container classes.

[@abomayeeniatorudabo8203]

I'm always interested in the ideas you always introduce to us.

[@jordondavidson3405]

Honestly, this looks like a great starting point for a layout system, especially for a component-driven cms. When working in a Bootstrapesque system with a "container" div, landing pages are particulary hard to create when you need to mix full-width and contained elements. This is a very elegant solution to that use case.

[@sevenstart7033]

That's a brilliant idea! I've often encountered difficulties maintaining the simplicity of my projects, especially with containers and the multiple levels of structures for grids and flows. This approach greatly simplifies achieving the desired widths without having to close and reintegrate the div tag elsewhere. During refactoring, I frequently found myself in a mess of elements that disrupted the design and forced me to reimplement the same style. I'm looking forward to trying this out in my current project. Thanks for the informative video and tips. I've subscribed and left a thumbs up 😄

[@tiercen8260]

Hey Kevin, I am pretty new to CSS and using it for layout in a major way. This concept really appeals to my programmer side. I hate writing the same code over and over. The ability to create something like this once and reuse it over and over and just change the config vars is something I am going to be using. I would even love to see more content expanding upon this idea.

[@woodrunsdeep]

Thanks for the video Kevin! You did a really good job on explaining and this technique looks quite interesting for sure 👍

[@Sebeklis]

Its amazing, I never thought so in the context of the grid, and it is, after all, so obvious

[@blocSonic]

This is great! I really haven't used grids much yet and this makes a great case for doing so!

[@WesRuvalcaba]

Mind blown. I hate HTML markup that only exists for styling, and I think this is an intuitive and useful way to avoid a lot of that. So far I haven't cared about naming grid things, only me about areas, but making grid lines for this purpose seems way more intuitive and useful.

[@nicesoul]

Totally agree!

[@versionoriginal]

Brilliant! Easy and very useful! Thank you! 😃

[@X3n0n36]

Made something similar not so long ago, named lines on grid are awesome. My solution was not the best but I feel every time I try to come up with pure CSS solutions I get better at it, maybe it's a lot of setup but when the client made me change some things I was able to do it easily.

[@OrryVerpoort]

I love this solution for symmetrical layouts. You could even do a compact column that goes smaller. I'm going to play with this concept and try to add asymmetrical breakouts.

[@OscarObians]

This!

[@MultiWar22]

Seems like it should be pretty easy to add asymmetrical breakouts, right? Looks like a 1 line change to me, at first glance, but I haven't tried it yet

[@anthonybradshaw5155]

Just did this on a blog I recently built and it's made development so much more hassle-free. The blog uses a CMS with pre-defined, custom-built components, and instead of adding wrappers to every 'text block' component, we just have one div that wraps the whole article - each text block simply pumps out HTML directly from the text editor. At the same time, we can create fancy new full-width components & mini-apps and drop them in middle of an article. It works great.

[@jeffreyrosenfeld6102]

I've been using similar approach for all of my recent projects: custom container class inside tailwind config with variables to control outer gaps/max-widths + col-span-full utility instead of full-width etc. I also prefer separating full-width and container utilities, so that you can have better control over layout of deserted block (depends on design I suppose). It also seems that having breakout functionality as a separate container inside full-width block should trivialise it a bit. Grids finally made breaking out of a container painless 😌

[@user-gx3sv7db8e]

Used a similar solution for a layout with more complex elements breaking out on one side and keeping header and footer in line with the breakout lines. Worked perfect and saved so much wrappers and calculations. :)

[@boby4751]

I agree that is looks like a mess and complicated, but, I understand how versatile the code is, like you said, you change a few things and it just works without having to code multiple lines for every change that is being made. I love your videos, they are simple to understand and to the point.

[@nullsurface]

Totally love this style of CSS. Thanks for the video!

[@lukedorny]

Love the ability to have an article tag span across several “sections” without having to close them. Also improves our ability to keep the markup semantic.

[@lukedorny]

Now show us the subgrid version?

[@d4v3w]

What a beautiful implementation. I will be using this for sure 👍

[@ExtremeTeddy]

Really like that approach. Haven't done much CSS in recent years, so this lift up many oldskool approaches I remember. Will try to consider this in the next backend application design.

[@ericsanchez2581]

It’s nice to know something like this is possible. Especially if you’re dealing with 3rd party applications which you may not have access to the actual markup. Thanks for the video.

[@Maeckboom]

You effectively created a subgrid-like effect without relying on the CSS 'subgrid' property, well done! This could have saved me a lot of time in the past styling CMS content.

[@patricknelson]

As usual, a very enlightening video. Thanks for sharing your sources and also your own examples and explaining it. I understand the hesitation there with the calc()’s, given they definitely add a lot of mental overhead. If this were on codepen it’d be fun to tinker with and try it out first hand (maybe come up with some alternatives).

[@JeremyChone]

This technique is so cool. (Also, the quality and flow of the video are really good.)

[@3pleFly]

This is a nice way to manage layouts! I might attempt it at some point

[@maerosss]

I love this. Not sure I'll be using it, but it's awesome to have this choice now!

[@paulhuckstepp2410]

Absolutely genius. That is such an impressive solution. Definately going to be using this method on the sites I build.

[@estebandipietro9685]

Great great example, I had a similar requirement for building landing pages in nextjs with contenful as a CMS, and I just did a lot of wrappers everywhere. I love this solution, and now that I know grid, this would be my go to

[@BMikel]

You could even not know frameworks like React or Vue, but still create amazing things just with Vanilla JS. Having a good command of CSS, HTML, JS makes you a wizard.

[@tobiasfedder1390]

I am trying to set up my blog at the moment and there I use a grid for the page layout in a very similar way. Sooo, thanks to you I feel validated now, or put another way: Yes Kevin, I think that is a great way of doing it. 😆

[@IanPitts]

Honestly this is life changing. As soon as my UX department creates a design where I can use this I will be using it.