 Hi there, my friend and friends. Gap might be one of the most underrated properties in CSS, especially now that we have it for both Flexbox and for Grid. It just makes life so much easier and makes things that used to be really annoying and hard to do just one line and you're done. It's incredible. But I've seen a little bit of a worrying trend where people are completely abandoning using margins and they're using Gap for everything. And I just think it's not the greatest idea in the world. And I want to look at why that is in today's video. So if we dive on over to VS Code here, I've set up a demo article. There's nothing too fancy in here. Just an article has some text. We have some columns here and a few different things. And there's some styling obviously on this, but most of it really doesn't matter in terms of what we're going to be covering in this video. But what I want to look at is, first of all, a lot of people do this these days. And this is sort of if you're going to be using Gap, you definitely want to not have margins on anything because they would just get in the way. Right. So it's this idea of we've reset our margins and now we're going to be adding spacing back in. And on this article, we might have an article with all of this content in here. And it's just regular flow content that would normally have spacing on it and it would just work anyway. But we've gone ahead and we've nuked it all. So then you might do something where you do article and then do a display grid on there. Right. And then we say Gap one rim. And it adds that spacing back in. And this definitely does have some advantages to it because it's not going to add a margin top to the thing that's at the top of the page. And it won't add a margin bottom to the thing that's all the way at the bottom of the page. And that's something that can be a little bit annoying at times having to deal with that. And we're going to sort of explore that a little bit after. And I do think that's one of the reasons people go that way. I will say if you do want to do this approach, definitely use grid and don't do the flex version of it because the flex, you can get the exact same results, but you need an extra line of code, right? We have to change your flex direction, not to row to column. Yes, I still mix those up and have to change it and get it right. So, you know, we can do it like that or we can do it like that. Just go with the grid solution if you are going to do this. But the first reason I would suggest not using it is this problem where the gap is consistent. We have the same spacing everywhere here. And that's not necessarily a good thing because especially from a typographic point of view, we don't want everything to be equally spaced. Go find a magazine that you really like or something that has just has a nice layout to it that has a lot of text in it. And you'll notice that things are not evenly spaced. So what we're going to do is let's get rid of that and get rid of all our spacing. And then the other way we can bring this back is doing our article and selecting all the children and then saying margin block start. And this is the logical property for a margin top. And I'm going to say one M and I'm not going to use REM here. I am going to use M. I know some people get scared of M's because they can compound and stuff. That's only if it's a font size. The nice thing with M's is if you use them in other things like this, like we're doing in this situation is it's related to the font size of the element. And I'm very specifically doing this, which again is on the top. So if we come and take a look at this element and we're dive into our dev tools a little bit here, where if we look at the H two, we can see the space on top of the H two is actually bigger than the space on top of the paragraph, because the spacing is related to the font size. And this is how you can get some nicer typography and get things looking a little bit better in a very easy way. By having a larger space here, we're creating some visual hierarchy and some proximity. We're saying this content is related than this content over here is related because the gap here is bigger. And if you're just scanning through an article really fast, it just makes your life better. And just following general design principle rules, this is the type of approach you should be taking. And by using the M here, it just makes it super easy to be able to do that. So already we have a nice start there where things are looking a little bit better. Now next up, let's come down to here where I've made these even columns. And actually, you know what, for these even columns, I have used a gap if we come and take a look at them really fast. And I'm just going to bring up the dev tools again for this. Here I have this card, we can see my even columns. And I have done a gap on those. And if I come and I actually make this a little bit smaller by turning on the responsive mode, the really nice thing with gap is it's also going to work vertically right when content and things are shifting around. And this is where we don't really want to be using margins. Because in this situation, if we wanted spacing left and right, the margin would be a nightmare to use it'd be really annoying because it would be sort of having this extra overflow on the sides and it gets in our way. So if you need spacing between components, you have cards, you have a layout that you need to put with different things in it. That's where gap is a lifesaver and it's the greatest thing in the world, even a navigation display flex on it, put gap on it, and then you have your navigation has equal spacing between it. It's amazing. I'm not saying not to use gap. I'm just saying make sure you use it in the right situations. So to help illustrate this, we're going to go into our card and I'm going to do a display grid on there display grid. And let's add that gap and I'll do one rem for some spacing because we want that equal spacing that could be the same as our padding and stuff. But then look at this button that's down at the bottom and look what's happened to that, where it's stretched the whole way across. Now maybe that's what you want and maybe and that's a situation where okay, I have a design that the designers given me that has buttons or something that does stretch the entire width across. And in those situations, doing this would probably be the easier way to do it. So you use grid throw a gap and you're maybe happy. And then you have to come on here and you're going to try to justify content start only to realize it's not content you want because using grid. So you're actually going to come in with the justify items of start. And then you're going to get those items to come in sort of be shrunk down that way and go back to what you had. Or, you know, we could take this off. And I could take all of this off. And I get sort of what I wanted in the first place. Or of course, you could come in here and build like a bit more of a margin based system, rather than using the gap and just end up with having to write a lot less CSS to get things to go back to where they were in the first place. And once again, I've seen things like this done with flex where you're doing the flex or you're doing a display flex, because people are used to flex box and they avoid grids, they do a flex, then they do a flex direction of row of column. Once again, I'm mixing them up, flip it back over. And then they go, Oh, now the spacing's wrong. So then I have to do my justify content, start on that. And then that didn't even work. Why didn't that work? Oh, because I changed my flex direction. So it actually was a line items that I wanted. So then you switch that align items. And then it goes back to how you had it. I took off my margin reset. So we can bring that back on really fast margin of zero. And you did all that. You did all this, just so you could do a gap of one rem when instead of doing all that, we could easily just target the different things we need and add a margin top on them. And this just seems like a lot of CSS to do, just to avoid like, Oh, maybe I have a margin bottom on something that I'm going to have to remove and we can easily do that as well. Right. So in this card, which I've made, which is a little bit different because I have an image at the top, then I have my content. And then I have the button. So in this situation, I might just simply be able to do card and select all the children and be able to say margin top is one m. And I could do that. No, that doesn't work because my image gets it. So then we just say, not first child. And there we go, the child that the image doesn't get it. We get this consistent spacing going through everything here. So everything's working. The other one, if you don't like the specificity gain is doing that exactly the same thing. It's selecting everything that's not the first item. Basically, this is the lobotomized owl. I really like doing it this way, but people will complain that it's not readable enough. So you could do something like that. And just as long as you don't mind the specificity boost on it, there you go. And you don't get that extra margin being placed on something. And personally, I find doing something like this much easier to do than having to write five lines of CSS or whatever it was just so I could be able to use a gap. Now, that's not to say that you should never use gaps. Sometimes they are definitely an easier solution, such as these cards that we looked at easier. Or if you have something like a form element, let's make this a little bit bigger. Let's just say font size here is two ram. So it's a lot bigger. And if you have something like this, where you have a form and it needs, you know, doing and if we come and take a look here, I have a div class for each one. So I put form group with my label and my input together. So we have all of those, they're set up, and they're in these form groups. If I've done that, if I need to do a layout here, and I need some spacing between them, well, in that case, it's much easier to say form group, and to say display grid. And then I can add a gap of, I don't know, 0.5 rem or whatever I need. And I can get that little space that comes in. And then I could even come and say, after that, if we need more spacing, either on the form itself, so we can have our form has a display of grid and then a gap of two ram. And I could create the spacing that way. And that would work really, really well, because I have these self isolated little elements. So I'm looking at this and treating sort of these as little components that are within this. And then we have that. And then I have this next level, where each one of these is being contained. I'm saying, well, what's my spacing between those? And it's very different from when we have flow content, where it's actually better to have larger spacing. And you don't want that consistency. And that's, I guess, one of the big differences you can have between it. One of them is, sometimes it's going to be a lot more work to use gap, because you have to set everything up to get there. Whereas using a margin just works. And other times is if you don't want consistent spacing. And I think a lot of developers don't realize that. That's why it's nice having a design to start with. But having that larger spacing between large items with larger text, your subtitles, your titles and all of that, it can really make a big difference. Whereas if you just throw a gap at it and it equal spaces everything down the page, it's not going to look as nice. And of course, I looked at a few different things here that were involving using flex or using grid. And I'm using grid for a lot of these. But Flexbox works fantastically well as well. And while we're looking here sort of at a micro level margins versus gap and when to use which one, if you'd like to look at a bigger picture looking at gap versus Flexbox and how I decide which one I'd want to use in any given situation. Well, I've covered that in this video right here. And with that, I would like to thank my neighbors of awesome James and Rico, Michael, 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 the internet just a little bit more awesome.