 Creating layouts with CSS can seem quite complicated at times and be a frustrating endeavor, but being confident with it and being able to understand what's going on boils down to one really important thing, which is relationships. Hello, my friend and friends. Thank you so much for coming to join me once again. And if you're new here, my name is Kevin and here at my channel, I help you fall madly, deeply in love with CSS. And I know one thing that people get frustrated with with their CSS is creating layouts because I hear it all the time. So in today's video, I want to look at the most important part of becoming confident in creating layouts with CSS, which is relationships. And it's a little bit like in life, relationships are very important in understanding the dynamics of all the different relationships and everything, the same applies to CSS. And that might seem a little bit strange, but well, let's dive in and take a look at the code to understand what I'm actually talking about. There's a lot of different relationships with CSS. And this is where things are different from other languages, where things are often much more in isolation, whereas a layout, each individual component, as much as we want them to be, has to, they don't live in isolation, they live in relation to other things that are on the page. And so the first relationship I want to look at is the parent-child relationship and it's a two-way relationship, just like in real life. And so in my CSS, we're going to start here with this primary header content and take a look at that. So on this primary header content, what I'm gonna do is set a width and we're gonna set a set width for now just to make sense of things. We're gonna set 750 pixels and you can see that that changes what's happening here. And let's just put a border on there so we can actually see things. Three pixels solid and we'll do lime so it stands out a little bit. And what's happening here is we've set the width of the parent and Kevin, this is obvious. I set the width of the parent and the children don't escape that by default. They don't overflow. Of course, there are overflow issues that can happen in different situations but this is one of those relationships that people take for granted and they don't think about it very often but if I have a width on the parent, the width of the children, which is auto. So my every child in this layout, primary header, content star has a width of auto. That's what's happening right now. And if you'd like to know the difference between the two, there is a card popping up right there or a video where I dive into the difference between them. But yeah, this is what's happening with the children. So the width of the parent is sort of dictating what's happening with the width of the children because the children are adapting to the parent. But what's interesting there is it's the inverse relationship when it comes to the height. So here the width is 750 but you'll notice the height actually got bigger when I did that. And so let's undo that for a second. So here the height is actually smaller and then let's even make this a bit more dramatic. We'll make it 450. And now the height of this has gotten a lot bigger because the area that the children are taking up has to be the same. So they have less width, they need more height to maintain the same area. And this is a very important relationship but one that people don't spend enough time thinking about. And the reason it's important is, you see people all the time setting heights on a parent and then wondering why there's overflow issues or other things going on. We want to, in general anyway, we want to let the children dictate the height that things need to be and just allow that height auto to do what it needs to do. Whereas the width auto on the children is a super useful situation where you can use a parent and often I'm doing it on my primary header content but often what you see is we have like a container or a wrapper div and then everything is inside of that. So let's just grab all of that and throw it in there. And then the same thing here, let's just do another wrapper for my card. So there that's, they're both in the wrappers now. And then this one, let's just change this instead of being on my primary header content, we can change this over to my wrapper and we can throw the margin inline auto on there which is margin left and right auto so it becomes centered on the screen. Very typical type of thing we're doing where we're using the parent to set a width and to hold all of the content in the middle. And again, this is something that you've probably seen and done a lot of times on your own and I'm just gonna switch this over to a max width and we'll make it a bit bigger. Let's do like 45 rem, there we go. So not too bad. And we're gonna get to the relationship between siblings as well, but there's more relationships with the parent and the child that I do wanna look at. So one of those is let's give my primary header content or let's give primary header actually a background because this is a very common design pattern that we see. So let's give this say a background of three, three, three. And actually one relationship I wasn't planning to talk about is inheritance where most of the font are pretty much all the font things other than form elements like inputs and stuff are inherited, right? So we have the relationship where inheritance comes in so I can set a color on my primary header and all the children will inherit that unless we overwrite it specifically for individual elements inside of there. And one of the things that catches people off all the time is the relationship of margins between children and parents where you can see that my primary header isn't actually touching the top of the viewport and throw a margin zero on there because it's frustrating and it's still not touching the top where if I look in my dev tools we have my primary header there and you can see the primary header has no margins on it it's highlighting on the page. I have my wrapper, you can see the auto margin on the left and the right there but nothing on the top and the bottom the content has nothing and then we get all the way down here to the H1 that has a margin on the top and the bottom but because of the way collapsing margins work the margin here on my page title is actually pushing down the primary header and so here let's just choose my H1 really fast H1 margin top of, I don't know, 1000 pixels and it's not putting it on the H1 it's putting that margin on the parent and so understanding collapsing margins is part of understanding relationships and there's also the different times when collapsing margins are actually a thing and whether or not because this part of the relationship goes out the window when we're dealing with a flex or grid formatting context so if the parent is display grid or display flex that collapsing margin goes away and just to show you there on my primary header let's do a display of grid and now that margin is contained on the H1 and that gray background is actually touching the top of the page now that isn't really the solution that I would use in this situation another one we could actually do on here is a flow route if you just wanna keep the display grid flow route just makes a new formatting context so the collapsing margins don't escape out of their parent or merge with their parent I'm not gonna deep dive that too much in this video but I just wanna highlight that collapsing margins are important thing to understand that they happen and that sometimes in different situations when we have new formatting contexts it doesn't happen is the sort of the TLDR of that but there's different ways of dealing with those collapsing margins common way to do that is to add some padding so padding will do padding block so it's top and bottom and I'll do for REM just to add some padding and the reason that the margins are no longer collapsing now is because the top of the H1 and the top of the primary header are no longer touching so if the top of both of them are together in a regular block formatting context where there's regular flow of content those margins will collapse and this is the same when you get multiple paragraphs where the margin between the top and bottom paragraphs are actually merging so you can see here where the collapsing margins on the top and the bottom of those are merging together and that's a good behavior because the default is for them to have the top and the bottom margin and that would just cause headaches if not now of course you might wanna remove the top margin from your H1 here to prevent too much space and other things so once you understand that and you know that there's margins and sort of the interaction between padding and margin and things like that we start to be able to move away and understand okay there's a collapsing margin here these are different strategies I can use to take care of that and not worry about it anymore and so you have a instead of just saying this is frustrating it's not working how I think it should work you're going okay this is happening because and now I have different strategies that I could use to try and circumvent it or get around it so another type of situation like that is when we have something like here I've done a simple card and there's not too much happening with it but we're gonna move a little bit into the world now of dealing with siblings and how siblings interact with each other so here normally siblings and different elements just stack one on top of each other and so in that situation the relationship between the siblings is pretty easy to understand even if I just came here and I did a paragraph with one word in it we're gonna have the word one and then even though we have empty space visually here the rest of the stuff goes underneath cause we know that's a block element that force new lines nothing too complex but when we get into the world of dealing with grid and flex so let's say I come here and I do some even columns because I want to create even columns and we'll wrap all of this the two cards in those even columns then we get into the world of flexing grid and that makes the relationship between things a little bit more complex so even columns and let's just throw a display flex on there and we get two columns and let's just put a gap on there of two REM and so we get two columns and everything looks perfectly fine but where things can actually get a little bit strange with this is let's say the second column over here actually had no image and only a title so we're gonna delete that we're gonna delete all that and now things look completely different and you're going well there were even columns before why aren't they even columns now and you get a little bit frustrated and this is about understanding how flex works and how flex impacts the relationship between siblings and now I mean one way you could do it is to make sure that all the siblings are the same size so even columns star so you're selecting all the siblings and then you can do a width or a flex one and then it does turn them back into even columns because we're now saying that they both have the same size and that's because this is actually setting the width basically to zero and then having a flex grow and they're both growing at the same size because their base size is small anyway we're telling them both to act in the same way and so we basically get even columns by doing it that way and of course we could use grid for this as well in a little bit more of a predictable way by saying grid template columns and in this case we'll do an auto fit repeat auto fit min max say 250 pixels one FR and then I can get my two columns that way as well and then we don't need anything on this side and the nice thing we're taking this approach is just not dealing with flex wraps and other stuff so there's different sometimes things that we might wanna do so if I add a third card you know it wraps underneath the next one because anyway I'm not gonna deep dive it too much because I don't wanna deep dive flex and grid I've talked about them a lot before but it's understanding how using flex and how using grid impacts the relationship of what's actually going on and before I continue going I just wanna mention that a lot of I'm saying formatting context a lot right now with block formatting context and grid and flex formatting contexts and just this idea of relationships is something that I talk a lot about in my course CSS to mystified which is a course that deep dives understanding how CSS works at its core rather than just saying throw these properties at something or follow along with me it's a course that I put together to really teach you to understand how CSS is working and part of that course is deep diving and going deeper into the relationships of different elements and the way different things interact with each other so if you're interested in that the link is down below and with that out of the way I'm actually gonna look at something where we're gonna switch things and talk a little bit like with this relationship of parents because here the parents are especially here the parent is influencing the child or the children but we're gonna go back to having a flex layout on this for a second because I wanna look at something let's turn off that bottom one here and our this whole div here just have these two columns that are identical we don't have to worry about them too much but this is where the relationship between siblings is so the parent controlling the layout is what I like to do and then having the children sort of just behave the way they should behave in there and part of that is understanding also how the relationship of certain things on themselves and how it affects the parents and stuff so let's just select the second card or yeah so we're gonna do even columns and then we'll do nth child two so we're selecting the one on the right here the simple card the second one and we'll let's throw a background on that one background light blue and so we get our card that looks like that but maybe we wanna add some padding on there and padding to REM and you might have noticed when I added that padding it actually influenced the one on the left right we're influencing both of them I'm adding padding to one and the other one's actually getting a little bit smaller which you wouldn't expect because I have my even columns and you go oh it must be that thing with the grid that Kevin you know we need these children to be the same so you do your star and you do your flex one on there but this doesn't actually do anything and this is where you have to be very conscious of how different things like padding and margin are affecting the children or the siblings that are around it in a bigger layout and how things like display flex and how things like display grid work to control the layout and how they figure the layouts out and so what's actually happening here is flex the way the flex algorithm works and this is a good thing it's done on purpose and I deep dive it a lot more in another video which I'll link down below but basically when we use flex box it looks even though I have my box sizing border box here it's not looking at the padding when it's calculating the widths of the different elements to do the flex algorithm with its shrinking and growing on it it's only basing it on the content size and that's because as the shrink or the grow is happening it doesn't want to change the padding that you've put on it because that would be really awkward if your padding sort of got squished in different ways so it's done on purpose but it does mean that if you use display flex and you have two columns once the padding is on one of those or multiple of them but not on all of them they won't be exactly the same size whereas this is a little bit different if we're using grid and then we turn back on my grid template columns because grid is setting cells and the children have to live inside of those cells they're not influencing the cells this is what's creating the grid cells right here and we can even visualize those if we come and take a look at them and so we have these and they're both set and you can see they're both getting calculated to be 344 pixels they're the same size as one another this is doing nothing right now and the children are being forced to live inside of those cells so this is where when using grid the parent has a lot more control on what's happening you're setting up the layout and the children are living within that layout whereas with flex the children have more of an influence on what the parent is doing and what their siblings are doing and as a result also influencing what's happening with their siblings as well in many cases so I know this is sort of a brief overview you might be going well Kevin I don't fully understand everything about these relationships right now I understand that it's about relationships but the best thing to do is to build things but when you run into problems to instead of being like this doesn't make any sense try and find out or figure out what's actually influencing things to result in the way they're you know what's causing the problem that is happening and the way CSS works every tool that we have does have very specific use cases and very specific impacts on how things happen it all makes sense but it's understanding what's actually happening and not just throwing a display flex it's something to get columns and hope that everything's gonna work out there's a lot more going out in the layout algorithms and a lot of complex things going on in the relationship between different elements on the page so even if you're just designing a single component where that component goes and how you're using it and where you're putting it has an influence on other things whether it's the height of the parent that you're putting it inside of whether it is the you know you're creating columns and it's impacting the width of the columns and then that's impacting the siblings and all of that just be very aware of these different impacts when you're creating your layouts now if you'd like to deep dive into the difference between Flexbox and Grid or the way the Flexbox algorithm actually does work in more detail I have those videos right here for your viewing pleasure and with that I would like to thank my enablers of awesome Jan, Johnny, Kyle, Mr. Dave, Patrick, Simon, Steven and Tim as well as all my other patrons for the generous support and of course until next time don't forget to make your part of the internet just a little bit more awesome.