 Hello, my friend and friends, one of the most common design patterns ever is the container or the wrapper. And what if I told you, though, there might be a way to not have to have one, which could be really amazing for me anyway, because I am amazing at setting it up at the first section where I have, you know, this, this no more containers section is, is, is in one. And then I forget to do it after that. But not only that, like we have this extra div and stuff that's coming in that I'm not always, it's just an extra layer of divs that we don't need necessarily. But, you know, then we have this next section, I needed a section, so it has to be full width. So I had to close that wrapper and then I come down and div, div class is my wrapper again. And I know there's ways of shortcutting this a little faster, but then we set that up. So then, okay, this one is done, and then I have to do another one here and so on and so forth. And we have them all over the place. And again, you might have it as a wrapper, you might have it as a container. But what, what if I said we didn't actually need them at all? And just as an example, it's delete all the ones that I have hit save and everything is too wide. And I just made a small change here. So you can see everything is all wrapped in something. And I'm going to show you sort of what the end result will be before we, we explore how I can do it. So let's say this section here, which is my BG primary on it, if I want that to be full width, I could just come in and say that I want that to be full width and magically it is and it just works. And that's great. And of course, this would work in other stuff. Say I had an image that I want to be full width, I could come down here and say that that's full width and hit save. And it's going to come and look at that it's full width as well. Or what if I didn't want that to be full width, but I wanted it to just be a little bit wider? Because right now it's like stretching from edge to edge. And maybe I don't want that. I want it to be like breakout and I only want it to be wider than the regular content, but I don't want it to be the full full width or you could even do that with content. Let's come on this paragraph and I'm going to do a call to action just to change the background color and give it a little bit of padding. And let's add the breakout on that one as well. And look at that. It breaks out of the regular flow of content. And we have sort of this this wider piece that we can draw attention to or whatever we want. And we don't have to worry about containers or wrappers or anything like that. And going back in and wrapping content in our, you know, adding divs in. And this is imagine if you're using like a CMS like WordPress or something where you just go, oh, this thing that I've put in, I don't have to worry about wrapping stuff. I just say it's full width and it is full width or whatever it is. It I think could make life a lot easier. So let's explore how we can do all of this. And so to be able to do that, we're going to be starting off with the site that has no containers or wrappers. And I've gotten rid of the CSS that was controlling everything. So we just have everything going edge to edge with nothing containing anything. And before I dive into this, I do want to say that I got this idea originally developed after reading this article on small CSS dot dev by Stephanie Echols, which she was exploring this idea of having breakout containers in CSS. And from here, I sort of got this idea that I started playing around with a lot more to, you know, we can break out. Why don't we have different layers and levels of stuff? And then I was really happy with this idea and then found out that Ryan Mulligan also had come up with this like a year ago. So let's just say great minds think alike on that one. So I'll link to Ryan's article, which is right here called Layout Breakouts with CSS Grid, as well as Stephanie's article right here, where they sort of are at different levels. Ryan's going to be a bit more developed, though he doesn't touch on one of the things that I'm going to be doing in this one, but he has sort of multiple levels compared to me where we're going to do a full width, a breakout, and then the regular content. So let's go and look at how we're going to set this up, which I'm going to come all the way to the top of my file. And I'm just going to create something called a content grid. And we're going to give this a display of grid, as would you would expect. And we're going to really start simple and level our way up through this. So let's do a grid template columns of 1fr, 1fr, 1fr. And I am assuming that you're familiar with grid to a certain extent for this video. So if you've never used grid, I would recommend there's a getting started with grid video that I'll put in the description. Maybe start with that one and then come back to this because you might get confused with things like FRs. And I'm going to be using minmaxes and we're going to get a little bit complicated along the way here. But we have a three column grid and let's come over here and let's just go on my main for now. And let's give this my content grid and hit save. And that's going to break everything because it's just throwing all the different things that were in my main into that grid that we just set up. So simple solution to this is and this is sort of the backbone of this. What we've created here is that we're going to create named lines within our grid. And if you didn't know you can do this, you just come in between two. So we have a column, then this is like my line and then a column and then a line and then a column. And so here I'm going to do content start. And I used never like naming my lines until I found out about this. And then I found out that line names can do so much awesome stuff. And I wish I was using them for a lot longer than I have been. But it's better to be late to the party than never to get there at all. So I'll just put this on another line to make it more obvious. When I save that nothing is going to change. But if I go into my dev tools and in my dev tools here, we can turn on my grid. And we can see here you actually have a content start and a content end. And my head is probably on top of the content end. So make it out of the way. So we have those two that are right there. And what's interesting with these is these actually make an implicit, like this, this area, this is actually a grid area. Now we're not going to get into that. I have another video. I'm going to talk about how these lines make implicit areas, which opens up doors that I didn't think of before. But what it also means is I can just come in and say content grid. And on my content grid, if we select all the direct children, I can say that their grid, grid column, instead of doing like a one over two and using those, I can just say that it's content and hit save. And everything starts at my content start and ends at my content end. And this is something that's really cool with this, like the naming convention here start and end will make a content area. It's really neat. So there we go. We sort of made a pseudo container, terrible one, but it's, it's a container effectively that we're going to do a lot more with. And this is really like the backbone of everything that we're going to build from here. The next thing that I want to do with this content grid though is let's first come in with a breakout area. So instead of a hunt or one FR for the two side columns, let's come in and say we're going to do a hundred pixels, 100 pixels. And then let's just copy this from this side and put it over on this side and people always tell me when I'm doing these things with long CSS lines that I can put word wrap on. I'm very aware. I just find it actually makes it much less readable than having it is a really long line, especially for demos and stuff like this. So we have 100 pixels, 100 pixels, one FR and then 100 pixels, 100 pixels and we can clearly see that here. So that's cool. Hopefully we're all in the same page now. But what I want to do is actually name a few more of these lines. So let's come here and we're going to do a breakout start. And then we can copy that just to make it go a bit faster. Come all the way here and do a breakout and now we are getting a little ridiculously long with with this line of CSS. One of the things with great, I find that you don't get with any other CSS like all clamps, I guess, and some of the number stuff like CSS is usually so short down the side. And then with grid, you get these super long lines sometimes, but it's worth it. So we can set it up like that, the breakout start and breakout end. And that means if we're in my grid inspector and you're using the grid inspector and you don't see the line names coming up since we are on that subject when you do your grid toggle and actually I'm using Chrome right now, but Firefox is it makes the names a little bit bigger if you want to see them, but you'll see here we have show track sizes, which we could actually turn off for this exercise. And we have the show area names and show line names. So we can hide the labels. We can only do line numbers if we want, or we can show line names. So I have my breakout start then my content start. And so it's 100 and then as long as we're putting these in between two of them, that line that's in between those two columns will get that name. So that set up like that. So that means what we can do is let's duplicate this. But we're going to say that it's my dot breakout and the grid column is my breakout. So just to see if this is working, let's go back to my HTML and let's just choose this paragraph right here. I'm going to say class is equal to breakout and it breaks out of the container nice and easy, but that does not address things like this because this one we wanted to be full width. So this is what we're going to do for that one is you can actually name lines starting over here because if we turn my grid inspector on and it's annoying when I say if sometimes you'll notice the color of my grid changes and the grid inspector turns off, but we do have a line at the beginning and we do have a line all the way at the end. So we can name those lines as well. So I'm going to say full width start and then we're going to copy this and we're going to come all the way to the end and we're going to do a full width end over there. And I know it's I'm going side scrolling the finished code for this is linked down below. If you want to see that might be a bit easier to follow along, but we have full width start on one end full with end all the way on the other end and then we can come here and we can say content grid is if it's a full width. We have a grid column. You guessed it of full width. There's a bit more to this one though, because if we use this full width and let's come here full with if we use the full width it works, but we're not containing our content, which to me sort of ruins the point is usually and this could even be like section or something else. But to me like if I'm doing this, I probably want my background to be full width, but I want to keep my content centered. I want to keep it within what would traditionally be the container that I have. So one solution to this if you want is you could leave everything exactly like this and you could just come on here and we could say that this is also a content grid and then if we did that it would work. No problem at all. It's going to line everything up and everything will be hunky-dory and should be fine. So if you like this solution and you know maybe sometimes you want literally full width and then you get it and then other times you want to have the content grid in there just to make that work and the advantage of bringing the content grid here, I guess is then you could also come and say class break out on stuff that's in there and then that can break out as well. So we can use that within there to me when I was doing this though and I didn't mind this so much and my first thought was actually subgrid and I started using it and then when I was like, well, people are going to complain about browser support. What if I did a fallback and then my fallback turned out that I didn't even need to worry about subgrid so we're not even going to look at it subgrid in this one but we have the full width and for me the easier thing to do is actually just to say that this is comma dot full width and that would also mean that over here we have the comma and then dot full width and choose all the direct children of that and we get the exact same thing. This is literally repeating myself a little bit right because we're setting up a content grid and a full width to be basically exactly the same thing. The only difference is we do want the full grid to pull ourselves back wide again. So you might not like this idea. You might like the idea of just redeclering you know the content grid like I did but I really like this idea of just setting you know my full width is going to be the full size and then I'm setting that up is the same grid that it's also inside of which is why I was originally thinking of subgrid but then it turns out I didn't actually need it. So that was kind of cool that it works like this. The one thing we could do here is instead of selecting all the children we could say not and say not breakout comma dot full width and I should have done that on both at the same time but it's not hard to copy paste it's going to work exactly the same way but here we're just not so the star selectors a little bit of an expensive selector here. We're being a little bit more specific that we're selecting this is probably an expensive selector to be honest but we're being more explicit. We're saying don't set these up for my full width or my breakout because they're getting their own grid column set up and yeah I'd really like to know what you think of this idea and we're going to explore a little bit more of the things you can do with it but you know do you like this idea of having these be the same. The other option here actually just you know and this is another way that I've done this is I just had this one was also basically the same thing display grid and then I would just do my grid template columns are inherit and you'll notice that it's still working so either one that works completely fine the one thing that is important is you do need to like you know re-declare this line here to place everything on the content grid as well so whether you want to use the inherit here or just have that same selector here I think they're both perfectly fine and yeah this is this is where we can sort of start using this stuff right so here I have that called action I just do a breakout on there and it breaks out and then I can come down and I have this image and that image can be my full width and it's going to be full width as soon as it loads in there we go and it just everything works the one problem with it is how I have it set up right now is it's very static and it doesn't work at all screen sizes so let's fix this up a little bit and make it a little bit more usable but I'd love to know what you think about just this idea in general please leave a comment down below to say like no Kevin there's nothing wrong with containers and wrappers we should just keep using those everybody knows them or does this make sense we just have a main grid and we're going to see how we can deal with the navigation and other elements as well but you know we set up a content grid throw stuff in there we need it to be wider I just say that it's wider I love this so very much I think it's so much easier like oh this is full width and this is a breakout and this full width and not having to like a section with a background full width and I put content in there and I don't need another layer to wrap stuff why did I not start doing this sooner I don't know but maybe you disagree and I would like to know if you do big rant there or rambling or whatever so let's keep on going and actually get this set up a little bit nicer so to do that what we're going to do is some locally scope custom properties and so I'm going to come in on these I'm just going to do them as regular ones I'm not going to do it with the underscore and stuff just because I don't feel like explaining it if you've seen other videos where I've done that and you liked it do it however you want to do it but here we're just going to do locally scoped custom properties because they only apply to my content grid and the first one we do is going to be called padding in line and we're just going to say to rem and that's going to be like making sure that our content never touches the edges because right now we have that locked in at 100 pixels which is a little bit much in my opinion the next one we're going to do is a content max width and this is completely up to you what's the widest you want to let stuff get to in this case I was using 900 pixels let's try something like 70 ch or something we could play with this number and then we also want to come in with a breakout max width and let's say that this one's going to be 85 ch and so with that set up what we're going to do is sort of play around with these these numbers that we have in here and it gets a little bit weird but it shouldn't be too bad but to do it I am going to break these over multiple lines just to make it and again this is where I don't find it's necessarily more readable in a sense but I'm going to sort of do it like this I'm not a huge fan of content start this one I'm going to put like that and then we can do so I'm not a huge fan of putting it like this but I didn't really know a better way and to get it all to fit on the screen so here what we're going to do and this is going to be for these two ones at the extremes so we might as well select both of these right here I'm going to use a min max and the minimum I want to do is my padding in line so we're going to do our var padding in line and then I'm going to do a 1fr you know next up we're not going to look at what this is doing because it's going to sort of break everything but next up actually for the breakout let's remove that for now so we're going to make those ones zero and we'll bring the breakout back in after but we're going to do here in the middle is we're going to use a min function not a min max but just a min because I wanted to use the smaller of two different values to figure out which one to use and min is good for this type of thing so we're going to say minimum between 100% minus padding of var padding in line star two and CSS if you're using a min or max or clamp you don't have to use a calc so this will work it also does use order of operations but what I'm going to do is just set it up like that just to make it explicit that we're doing the multiplication first the reason I'm saying 100% minus this times two is 100% will be full width of the parent so it's saying 100% minus the space that we've set aside on the two edges and that means that maybe this is going to work at the stage let's go take a look you can see there we go we have the two rem of padding on the two sides and at one point well it's always going to be like that because this is the only value we've given it so this is just the size it is it's 100% minus the padding on the two sides just to show you if I said 100% what would happen is we would get some horizontal scrolling because we're having the 100% and we have these two columns that are causing the overflow after that so we don't want those to be there so we have that now though I'm going to supply a second value which is my var content max width so this is saying use the smaller between these two so my content max width is 70ch so for smaller than 70ch it's going to use this one right here but if we get larger than that it's going to stop at 70ch in width because that is smaller than the 100% minus the padding on the two sides so choose whichever is smaller meaning we're getting this that we have here right now I asked for opinions on this and I know people right now are going to be saying Kevin this is ridiculous we can just do a container or wrapper it's a million times easier spare with me we'll get to the end I do want your honest opinion to me this is not over engineering even though there is another way to do it just because I find this could potentially be much more versatile so it's it's finding that balance and there's things we can do with this that are more difficult or you know it's not about implementation it's about use of so that is a big part of it in my opinion when we're creating these types of things so that we that's working now the only problem is we are break out is no longer working because I'm pretty sure one of those paragraphs at the top there we go has the break out on it for the breakout it's going to be a little bit strange in how we're going to set this up and I have the zero there and have the zero here and what we're going to do for both of those is actually you know what we could do this let's say breakout we'll say size and the reason I'm putting this on its online the this is the max width that we're going to have but that means we need to do a bit of math because we actually need to take that so var my breakout max width and we're going to divide take that and divide the whole thing by two which does mean I need to use a calc and the reason I want to divide it by two is because we need half of the breakout on one side and another half of the breakout on the other side so now I can just come and say that this is and maybe this could be worth putting into another one or this whole thing this min could be worth making a custom property I'm not sure but we have the breakout there so that means here and down over here we can come in with my var breakout size hit save and if we did that properly we have now a breakout that is completely broken so I did something wrong and I know what I did wrong is I'm just saying 85 CH but we don't want it to be 85 CH divided by two we also want to say minus my var content max width divided by two right so let's take all of that again order of operations is coming into play here so we need to wrap that up before we do our division or it would do this divided by two anyway so we're saying that if it's a breakout area the total width is 85 so we want half of that extra on both sides but we need to subtract to the 70 from that and then divide that by two to know how big to make each one of the side columns and a change of wardrobe because I made a mistake and luckily one of my patrons caught it before we published a YouTube since they get early access to my videos so if you do want early access to them you can join the patreon it is linked down below and it helps support my channel but what I did here is I set up this breakout area and it's working the problem is it will force things to be a little bit too wide and so let's just take a look and I'd plan for this and just completely forgot it so if I open up my dev tools everything's working fine but when we get to these smaller sizes as you can see we get crazy overflow weird stuff going on and basically the reason that's happening is if I turn on my grid the breakout area has a fixed size on it and we want that to be able to shrink and that's really easy to do we sort of already set that up a little bit when we were setting up our min function here for the content area to be able to shrink in this case it's actually a little bit easier and we'll do both of these breakouts at the same time where I can set up a min max for them and we'll open them in max here and close it all the way over there and basically we want to say the smallest they can get is zero and then they're able to grow to the breakout size so if I make that change and I hit save now if I come over we've gotten rid of all the overflow and you can see that that breakout column that's here and here they'll max out at a certain size but then as it gets smaller and it starts running out of room it's able to shrink and just because of the way that the grid is working with this being the min function those will shrink first they'll eventually get to zero and then the breakout content will just line up with the regular content for your other views so it works really nice and easily there's no like nothing to worry about with media queries or anything it just it just functions which is fantastic and yeah it definitely is quite a bit of setup to get all this working if you take a look at this you might go Kevin this is kind of nuts when I could just do a container with a max width and in some auto margins on the sides and that works really well to I just find the versatility of this is really nice because I set this up and you know if I'm going project to project I just take this copy paste and I'm just changing this people don't have to come across the code and make changes to here you're just making updates to this and if you want something that's even more robust you could definitely check out Ryan's article because in there he looks at setting up the full the content the pop out and the feature as well so he has some examples here where you can see we have different widths that we break out to the only difference he does in his article I believe is his full doesn't turn into another grid that then gets that control over being inside of there which is part of the reason I really love this but I really do find it versatile and like I said I love being able to stick you let's say here I want to wrap this paragraph in a section that has the class of BG primary so we get that blue background and it just so happens to also be a full width section which is basically what we're what we're usually doing with our sections right like a lot of the time we open a section close the section we have to put the wrapper in there I can just open it close it say it's full width and like magic it's full width with the content being in the container type you know pseudo container whatever we want to call it it just works and for me the ease of use here and the ease of use of updating it once we've created it over I think might be a valid reason to actually use this instead of maybe the simplicity of what a regular container is or a wrapper that you might have in a normal project but I would really love to know what you think so please leave comments down below and tell me that this is way over engineered or that you absolutely love it or maybe something in between also don't forget to check out Ryan's article here as well as his blog it's a really good blog I often link to it in my newsletter as well check out small dot css it's a fantastic resource it's not just this there's a whole bunch of different little code snippets of different stuff you can sort of go in and steal responsive patting and lots of other really good things in here and if you like nerding out on css in general do also check out Steph's newsletter it's one of the few newsletters that I am subscribed to and people are always asking me how I keep up with house you know the quick pace of css these days and all the new stuff coming out and Steph's newsletter is one of those resources that I do use and with that I would like to thank my enablers of awesome who are web on demand Andrew, Simon, Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome