 This type of layout where we have content that is next to something that's full width or even like this where you have a full width background going up but only on one side, maybe it's next to an image or we could have two images or we can have content on both sides, but we want to keep that image locked into the same width of an existing wrapper or container that we have. And it's actually really easy to set things up like this where they, you know, shoot out the side and go to the edge, but it's a lot trickier to get it to match. And in this video, we're going to take a look at how I like to approach this type of thing. And we're going to be starting with not very much. You can see I have some content in place. And might as well just jump right into it. And we can see that I just have a section here with a wrapper. I have another section with a wrapper underneath. And then I have this content here. And what we're going to do is look at how we can set it up exactly within this situation that we have right now, where we just have the image on the left and then the content that's going to be on the right. And then we're going to see how we can adapt that so the content can go in any order and it can be just two images or it could be two text boxes or whatever you want. And I am using a wrapper because I'm assuming you already have an existing project and you have something like this already in place. It could be a container or a wrapper with a max width. Margin inline auto is my margin left margin right of auto. And then my padding inline is the padding left and padding right of one rem and the whole point of that if we go into responsive mode here, if I shrink it down, it's just that little gap that we have on the sides here and down at the bottom to prevent the content from touching the edges of the page. So with that in place and response mode, I'm in Firefox control shift M will open it. It will be the same shortcut in Chrome, but you have to have your dev tools open for that shortcut to work. So let's take a look at what I'm going to do here. We're going to go to the HTML. And I'm going to go on this section, which is the one that has my huge image right now and this little bit of text. And on that, I'm going to give it a class, give it whatever name you want. I'm going with full width split screen, because it's sort of describing what we're doing here. And that's the only class I'm going to use. I'm not going to put anything on the content that's inside of it because I just feel like it's easier to use that way. And the pattern I'm going to have is if it's an image, you just throw your image in there, it should work fine. But if you have any other contents you have text and whatever else that you need to be stuck inside the container, basically anything that you don't want bleeding all the way to the edge of the viewport that will get put inside of a div. And then we can come over to here and we can set that up. So I'm just going to scroll all the way down to the bottom. We're going to say full width split screen. And actually what I'm going to do is I'm going to bring my wrapper with me because we're going to be using some of the numbers from here. And then we're going to see how we can update things. But I want to do this assuming that you have a project that's already been started and you have an existing wrapper or container that you're going to be working with. So sort of how you could do that. And the first thing I want to do here is actually have it acting a lot like my wrapper. And this is more for smaller screen sizes. So when we're at smaller screen sizes here, I want it to match that one padding that I have here. And we don't see it so much here, but we want that padding that's going to be on the left and the right. So I'm just going to come in and say padding in line of one ramp. But the thing is I would ideally like this to always match what my wrapper is. So you could just make sure the numbers are the same. But what I would actually recommend doing is making this a custom property if you have that ability. And so I'm just going to say wrapper padding in line. I don't mind having a very long custom property like that because it just tells me exactly what it's doing. And that means I can take that wrapper padding in line that we just put here. And I'm going to bring it down to here. And of course, that means they all go away. So we'll go all the way up to my route. And up here, we're going to say that we have our wrapper padding in line. And it was one rem. And now they're all going to be acting the same way. Now this isn't going to be perfect because the problem is it's adding it to our image here. We don't we still want to let our image go edge to edge because I think that just from going from small screens to larger screens actually makes a little bit more sense. So to be able to do that and to allow that to happen, instead of saying that my padding in line is on the actual full width split screen, I want to select let's go take a look, we're going to be selecting this div right here. And again, it's either we're going to have an image or we're going to have a div that has our content in it. That's the important thing with this pattern. You would want to document that somewhere along the way just to make sure people are aware that that's how it needs to be used. And if you had one paragraph, I guess this could potentially work without the div. But it's a safer to always say put content in the div. Because what we're going to say is any direct children that are not an image are going to get that padding in line on them. And that lets the image stay full width and then under this image, we have that div that's getting that padding in line. So here, if I add in a, let's just put in a background color, background of yellow, it's going to look ugly, but at least we'll see it. You can see that it's going edge to edge, but we have that padding that's in there. And this is going to be really important for when we do want a background color on these elements as well. But we'll get back around to that after. But for mobile screens, that's basically what we need to do to get this to work. And it should work in most situations. We might come back to see if we have to make a fix to it. But for the beginning, I think that's actually a pretty good start. But obviously we need things to change when we get to larger screen sizes. So let's say at media, and I'm going to do a min width of 600 pixels would use whatever width works for your design. The 600 here is just a number I'm going to use. And now we're going to say is this full width split screen is going to use a display of grid. And what I basically want this grid to do is replace the container that I have or mimic my container, but have it to column container. And the reason I said container, my wrapper, and the reason that I want it to mimic that wrapper is because I do want to allow things to be able to spill out the sides of it. So my full width split screen will be full width, but we're going to be using grid to make columns within that that are going to be similar to what we need. And so to be able to mimic that, what I'm going to do is a grid template columns, columns, and for now I'm going to do one rem, one fr, one fr, one rem. And just to we're going to just see what this is doing is we're going to step it up from here in my dev tools. I can turn on my grid just so I can see it. And if we're at small enough screen sizes, you can see that one rem on the two sides here is actually acting as that one rem of padding in line that we had on the wrapper itself. So that's giving us that space. And then we're getting the two columns in the middle. The problem is when we get to larger screen sizes, we want these two columns to actually match the same size as what we have right here. So how can we do that? That's actually pretty easy to do. What we have now is we have this max width on a wrapper of 50 rem. So I just need these two to have a maximum width of half of that, which would be 25 rem. So we'll start off like that. And then when again, we'll use custom properties to sort of fix it up a little bit. So I'm going to put this on another line just to make it easier to read. But here we said we want a maximum of 25 rem. And when we're using grid template columns, that means we're going to use a min max. And inside the min max, what we're going to do is just come in both of these. I'm going to say a zero comma 25 rem. And you might be saying, we don't want it to go to zero. I'm completely right. We don't want it to be able to get that small. But we never will hit a zero because we're only coming in at that media query that's right here. And this just means we can shrink from zero up to 25. And it just means we're not trying to figure out like what's the smallest value, we don't really have to worry about it because this is inside our media query. Now if I do that, it's sort of working. The problem is it's shifting over to the side right now. So it is the right size. Overall, you can see it's working, it's working, it's working. And now the 25 and 25 is equaling this width, but we have the problem on the two edges. So that means on these guys here, I actually want to switch these one rems here to a min max as well. And this min max is going to be one rem for the smallest. And the biggest is one FR and the FR unit just means grow as big as you can possibly get as long as there's available space. So if we switch both of those over, let's just show you what that whole thing looks like. So it's a min max of one rem one FR on the two sides, the two ends. And then in the middle, we repeat the min max of zero 25. So let's hit save on that. And if we go and take a look now, it's going to match exactly what we were doing here. And so you can see that this one and this one, they're matching the total width here, which is perfect. Now there's a few other issues the text isn't lining up and other stuff right now we're going to get there we're going to fix all that don't worry. But at least we've set the stage for what we need to do next. But before we take that next step, I want to make this a little bit more versatile and make sure that it works all the time. So I said we'd update this with custom properties. So on these min max are pretty years mucking up my code a little bit, but we'll fix this up as we go. We've already done my wrapper padding in line as this value that we can update. That's actually this one rem here. So if we always want to make sure those numbers are the same everywhere, I'm going to bring that in there. Then we'll have our min max our min max. And then this one here, which again this one rem will be the padding in line. So the two outer ones, then we have the intersection of our wrapper quote unquote, that has the max width here of 25, which is the max width here divided by two. Well, we always want to link those two numbers together. So this could be my var wrapper max width. And then we could come and add that up here, whatever you wrapper max width of 50 rem. And now let's go down grab that wrapper max width from here. I'm going to select both of these 25s here actually. And before I paste it in, I'm going to do a calc on these. We're going to say a calc of that divided by two. And I realize it's a bit hard to see. So we're going to put each one of these on its own line. And now this starts looking a bit complex when you first look at it. But it works really well. And it makes it much more versatile and how it's going to work as we use this project. And if ever we have to make changes to it, or if ever you need to grab this and use it in a different project, it should work because you just update the custom properties. And so now, if we take a look, let's shrink this side down so we can see our browser a little bit better. And it's working just like it was before. But the nice thing now is I can come to my padding in line and I can update it. And at smaller screen sizes for now, it will fix itself. Let's get below there. So now my container has padding of three on all the sides. So it's all matching. And I realize that larger screen sizes that's a little broken, but we'll fix it. But you can see updating it there changes that. And if I change my max width here, let's just make it 40. So it's a little bit smaller. And at larger screen sizes, everything will stay lined up. So it does take a little bit more work, you might not be able to actually make this change in your project to bring it into custom properties. But if you can, it just makes things a little bit more reusable and easier to update over time. So you're not changing when value and then having to find the other value to change it later on. But if this is a project where you don't have that option, just you're putting your max width dividing it by two, you can do that within a calc or just do the math yourself, but probably leave a note about why what those values are, if you can't use a custom property, just so it's a little bit more obvious what the numbers in here are actually doing. Awesome. With that done, we can sort of fix this a little bit. So my image isn't sitting here. And let's start off by saying, and we're going to update this again in a little bit, we're going to first select our image. And we're going to say it has a grid column. And the grid column is going to be one over three. And if you're not familiar with grid, I'll link to some videos down below. But once again, we can inspect on here and open up the grid inspector. And you can see the line numbers, we have a one, a two and a three right there. And then this one is actually in the right spot now, which is fantastic. And this is spanning the entire space. The other thing is I want this content to actually be moved down into the middle. And there's two different ways we could do this. But what I'm going to do, remember I had those background classes that were on the or I had background classes in my styles that can add background colors. I'm going to remove this after but on this different now let's just do this as a primary. So it gets a background color on it. Because while we want this background color to definitely spill out into this area, the one thing we don't want to do because you think sort of the easy solution here, I guess, because we have a display grid already here, we could do an align items of center. And it's going to center that but it's going to center it with the background which we don't want to do. So because of that, what I'm actually going to do is come on here and say we're going to need this selector anyway, full with split screen. And just like we did before, we're going to do not IMG. And so we're selecting our image there, anything that's not an image here and you could go with classes on these if you prefer instead of the selectors, there's no problem. I just find doing it this way it takes, you know, your selectors a little bit longer to set up. But it just means when you're using it, it's much easier to use because you don't have to put a class on anything, you just put your image, you put a div and then you go from there and you're less worried about it. This is what's doing all the heavy lifting and I'm really moving to writing my CSS in a way that works that way as much as possible. There's obviously exceptions to all of that. But I digress to go back to this what we're going to do is on this one do a display of grid. And we have place items, but that would actually not work here. I did a center because it does that. So place items is doing it in both directions. The other one we have is a line items and that one also weren't won't work a line items, just because it's sort of it's centering, but it's like distributing the space. But we also have an aligned content. And that's the one we actually want where it will keep it centered that way. But of course, you probably don't want your button stretching and stuff like that. So we're also going to do a justify content of start, which will keep everything lined up on that side, except it is not justify content. It is justify items that we want. And then it keeps sort of the original flow that we have, but it centers it the way we need it to. Now the next thing we'll do is let's see if we can get this color to spill off into that background area. So let's shrink this down so we can see a little bit more of everything that we're working on. And I'm going to change the color just so that stands out a little bit more. I have my accent color, which is the orange one. Just so we can see a little bit more of what's happening to make sure this is actually going to work properly. I realized we can't see the button now, but we'll take the background color off after when we make sure this like right now I'm setting this up, it's only going to work if the images on the left and the text is on the right. But once we get this part working, we're going to adapt it. So it's going to work no matter what content you throw at it. And actually this next part I really like where we're going to do a full width split screen. Once again, we're going to have our not IMG, but I'm going to select the before or it could be an after it doesn't really matter, but we need one of the two pseudo elements from this one, which is going to fill in the background on this empty area here. And this is one of the other reasons I used grid for this. There are ways and if you only had like solid colors like one solid color on this side and one solid color on that, you could just have like an overall area and use background images even with a gradient that has a split down the middle. But if you need an image and other stuff that's spilling out full width, I find this is sort of an easier way to go. So on this before we need to have some content because it will not be there if you don't, we're going to throw a position of absolute at this. And for now, I'm going to put a background of let's go with lime green just so it really stands out and we can see it. And I'm going to do an inset of zero and it's going to cover the whole screen because we have a position absolute here. So we need a position relative somewhere. Often what you do is you go to the direct parent. So this would be the direct parent. But if it's position, let's do it here for a second position of relative it's going to cover this. I don't want it to be here. I want it to be in the cell to the side of here, right? This one that's off to the edge. So what I'm going to do is we're going to remove it from here and I'm actually going to go and bring it up here to this one. And it doesn't have to be in the media query, but I don't have a selector directly for this outside of there. So here, let's just bring it down to the bottom so it's not with my grid stuff. And I'm going to put the position relative there. And you might be saying, well, Kevin, that's a little weird because now it's taking up the whole size. We could just Z index this to the back. We know we bet in a way, but just to be really on a safe side, especially if we had two text boxes, then one of those text boxes, the background would spill over the other one, it would be problematic. So what we're going to do here is because this position absolute is looking at the full width split screen, it is actually living inside this grid. And these line numbers that we can see right now, they work, right? So we can come here and we can say that it's an incentive zero, but it has a grid column of we want four to five. So four over five or it could be a four over negative one or it could be in whatever we by doing that, it goes into here. So I could do a negative one, negative two to negative one, whatever line number I need, but I need it in this last area right there. And it works. And of course, you don't want the lime green. We want it to be an inherit. And with that, we will always match the color that you have on that area. So if I change this over to secondary and I hit save, we will see it changes over to that purple color. If I switch it over to primary, it will switch over to the blue color that I have. And if I don't have a color set on there, it's going to stay transparent like it was whatever the color is here. It's going to be the same on that one. And so it just works really well. But now what if I wanted this, but the other way around, it's not going to work right now. So to show that and we're also going to run into another problem with some of our spacing as well that we're going to see with this example. And we're going to fix will fix two, two birds with one stone. So I'm going to paste in this code that I have right here, which is completely breaking everything. It's a complete mess. And so we'll examine why that is. But if we come and take a look, I've just added a little bit more content inside of a wrapper first. And then I put in another section, which has my full width split screen on there already. And in there, I have a div and then an image. So if I were to move this image first, and I hit save, well, it's working fine. I have my image first, I have the text on that side, everything is hunky-dory. But when the image is coming after, we're breaking everything. And it looks terrible. And oh my goodness. But luckily, it's very easy to fix. So going back over to the code, what we're going to do, let's shrink this down. So we can see what we're working on. I want the image to be in grid column one over three, but only if the image is first. In this case, the image isn't first, the image is at the end. So on this one, I'm going to put first child to ensure that this is only going to work if the image is my first child. And then I'm going to duplicate this code. And on this one, if we take a look at our line numbers before I update this, we'll turn on the grid, we can see that I want it to go from three all the way to the end. So if it's the last child, I want it to go starting at three and going all the way to the end, it's always going to be a negative one. So I'm going to throw that on there and hit save. And now my image at least is going in the right place. The pseudo elements covering part of it, but at least the image did jump over. And then we can do a very similar thing here. Actually, this one is perfectly fine. So we'll leave this alone. But I'm actually will duplicate it. But I'm going to delete everything that's in here, because we're going to do a first child. And if the text is the first child, we want it only to be in this cell. So we only want it to go from two to three. So it's going to be grid column two over three. And then we can duplicate that one right there and say that if it is the last child, which would mean that we only want it to be here, it's going to be in my three to four. So that would go to a three over four. Let's fix that. There we go. And now we've sort of fixed it. We just need to get the pseudo element to be over here as well. So once again, this is fine. And actually, the everything here is good. I'm just going to remove my grid column. We're going to duplicate this one. And if it's not the image, first child. So if the text is before my image, and in this, so this is on the first child before we'd want to have the grid column. Let's just duplicate this one and choose our after. And if you're going, this is hard to copy. Not after we want the last child, sorry, last child. The code, the link to all this code is in the descriptions. You could sort of break it down a little bit. And there'll be some comments about exactly what each one of these is doing in there. But we want the full width, split screen, not image. So my text box, if it's the first child, we'd want it to be over here in this space. So that's my one over two. So we can say that that goes to my one over two and hit save. And now look at that it's working there. And it's also working over in this one. And I have this text here that I thought I had in a wrapper when I copy pasted it, which it seems to be, but it's not working. Why not. And there we go. I just fixed that off screen. So the content would all line up. And overall, it's, I think coming together nicely, but there's a few problems. One of them is when the text is on this side, you can see that this there's that padding that we'd originally put on it, that's sort of getting in the way. And also when we get to smaller sizes, and again, the text isn't lining up, but the the size here or even at larger screen sizes too, like I find the whole thing doesn't look really balanced off too well. So we get to these big sizes, we have all this room on this side. And on this side it's so stuck to that because we just have that one rem of padding right there. Another thing that could be an issue is right now, like my sections don't have any spacing on them. And here it looks okay when it's centered. But if we shrink this down, like it sort of sucks that our spacing or the spacing is there. We want these to sort of have the same spacing on them. So let's fix up all of these spacing issues that we have. And the first one will start with the easier one, which is going to be directly on my sections. You might have a class for this, but I'm just going to come up here and say that if I have a section that section is going to have a padding block. So it's padding top and bottom. I'm just going to go with three rem. You could have whatever just we have a number that we're throwing in here. And you can see that now at least it's spacing things out a little bit. The only problem with the spacing of first it's breaking things down here. But I don't want my if we come here, I don't want my full width split screen to have that padding because that's going to influence this picture right here. So let's come on here where I never even created a selector for this outside of mobile, but we're going to are outside of my media query, not mobile. So outside of my media query, we never did this, but we're just going to say that my padding block is going to be zero to make sure that that fixes sort of the problem that we had right there. I also see my image isn't going the full height. So we'll fix that as we do this too. So it will depend on your images. That's not a hard fix. But that padding block will help. But now the issue is we have this nice padding here, we have that padding coming here, we have that padding coming here. But here, this text is still stuck to the top right there, which makes the whole like balance look a little bit weird. So to be able to fix that, once again, we can turn to custom properties where this we set it up as my var section padding block and hit save on that. And then we can take this value, bring it all the way up. Come down here, we have a section padding block of three rem and then we can use that value all the way down here. In this guy, anything that's not our image that's in there, we'll have a padding block of that value of our that value that would work better. So now the element inside here gets that padding, it will match the padding there. It won't always be like this one, it's not actually probably getting used because we have small enough texts that's getting centered within the area. But on this one here, it definitely is working, especially when we get to these smaller screen sizes. And if you're enjoying this video and enjoying how I'm teaching it, you'd like to be able to create things like this on your own and just come up with these solutions by yourself, but you're not feeling confident enough with your CSS yet, you might be interested in my course CSS to mystified. It's for people who have been writing CSS for a little while, you're comfortable with it, but you're not so confident yet with it that you're coming up with your own solutions and writing it with tons of confidence. If that sounds like something that you'd be interested in the link to it is in the description below. But with that out of the way, let's come back here to fixing this padding alignment issue that we have. The other one now is our alignment issue here, which is the easiest one to fix it or everything. So we'll tackle that one next where we're just going to go down here and we set everything up. But basically we want to say that our padding on this side is zero, except on this one, we want the padding on the other side to be zero. So we're going to say if it's our first child, we're going to say the padding left is going to be equal to zero. So it matches up on that side. And if it's the last child, so it's this one over here, or you know what we're going to do, let's come down here and just really quickly, I'm going to actually move this section underneath here. And then we'll add in a another one that's going to be two text boxes. So we can delete that and just come in with a second text box and change this to primary. So we have two different colors just to make sure it's also working with two different text boxes. So there we go, we can see they've come in and they're working. Okay. So with those two in place, what we want to do next is we want to make sure that the padding is working for both of them. So we said that we have the padding left on this case on this one, I'd want it to be my padding right of zero. And as I said, we'd sort of want to increase the space between them because it gets really, really tight, especially as like the space here is increasing. It's weird how close these are stuck together over here. So to be able to fix that, I'm going to come on this and you'll notice I'm not I was using logical properties up until now. And now I'm not using them. And if you don't know too much about logical properties, it's the inline the block I was using I'll link to a video down below that does go into more detail or I'll put a card up above too. But here we're going to say padding is right. We'll explain why I'm not using them here once I've set it up. And I'm going to use a clamp. And the reason I want to use a clamp is because I want the smallest it can be to be about one rem. Then we can say like five viewport width and clamp maybe the biggest is at three, because we definitely don't want it to get too gigantic for our very large screen sizes. And then I can just copy this paste down here, but switch this one over to a padding left. And now let's see how that's going to look and it should work. We just have to fix our images next. But we should see, I guess we'll focus on these ones where we have all those text boxes. So it's small screen sizes as this is shrinking. We definitely want the other side to be able to shrink down. And if we inspect on here and I take a look at it, you can definitely see like the padding is a little bit bigger on the right side, but it's not too bad. We could play with that viewport unit to to be a little bit smaller. But then as it's getting bigger and bigger and bigger, that padding is going to increase just so it's not so glued to the edge. And you can really see, especially on this side, we've increased the amount of space that we had there just so it balances out everything a little bit better. Maybe you want it to even be able to go beyond three. That's fine. Find a value that works for you for what that padding is going to be. But I just find having something like that that can adjust as the screen is getting bigger and smaller can really help just to keep everything look a little bit more balanced. And at the same time, we're keeping everything lined up on both sides. But just before we fix this issue with that, I just mentioned that I was going to talk about the logical properties in a way I did not use them. When we set this up. And the reason for that is with a logical property, if you change the writing direction, it will switch the pet the side the padding is on. So padding inline start, which would be your left side in a left to right language, would jump to the other side and vice versa. And I don't want that to happen here. If we switch this to a language that was a left to right language. And so the text here was becoming right aligned. I'd actually want to keep this padding always on that side. So while I am a big fan of logical properties, this is one of those situations where I don't actually want to use it. And if you're not familiar with custom properties, I have a video on it and I'll remind you about it at the end. Now the next thing we're going to do is let's go back to my HTML really fast. So we can have two images and I'll copy this image here and we'll grab my other image that I have right here. And we'll do a another section of the full width split screen. And sorry, I just went a bit fast to add that in there. But now if I come and take a look, we have the two images that are down at the bottom. Now because it's two images and I think their aspect ratios are the same, we're not actually getting those weird issues like we saw here, which I thought we'd get. But just to show you two text boxes work, two images does work. Left text works, right image, left image, right text, all of these different situations will work, we just need to fix this issue where if the image is not tall enough, that we don't want this to happen. So let's go over to here. And on the not image, we could even do that we wanted to be our images obviously, actually. So this would be for all my images. So we'll just copy this. And we're going to paste that in. And we're going to say that the width is going to be 100%. The height is going to be 100%. And it's going to be an object fit of cover. And by doing that, now the image fills up the entire space. If I didn't have the cover on there, it's going to stretch the image. We don't really notice it on that one necessarily because it's sort of a pattern type thing, but it would stretch the image. So it treated a little bit like a background image that will crop it as it's growing and shrinking. But I think that works out really well. And what I like about this is we can sort of mix and match and throw different things at this. And no matter what we're doing with it, it's always going to work. So it's definitely a little bit more set up and getting it all working than like that one thing we started with at the very beginning. But now that we have it, it will work no matter what, which I think is really awesome. And earlier on, I mentioned a video about logical properties. So if you want to check that one out, or if you'd like to dive deeper into the world of grid and being able to better harness that there are those videos that are right here. Don't forget what CSS demystify that is linked down below. And with that, I would like to thank my enablers of awesome Johnny, Tim, Simon, Michael, James and Andrew, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.