Spacing Between Elements

[00:00:00]
>> Steve Kinney: We know how to style an individual component, but turns out most pages tend not to be just one component, right? Usually you have more than one component and you need to lay them out in some way, shape or form. And we've got a bunch of ways to do that.

[00:00:13]
We've got some of the older, tried and true margin kind of based layout techniques. We've got things like flexbox, we've got things like grid. All of those we will take a tour of today. But let's kind of we'll do them in, I think, I guess, technically chronological order.

[00:00:32]
Cool, so I think I have another one here called Card List, where my card that I just made, this is the only reason we pulled in any framework, the card that I just made, I can use here without having to do it again. And what's the thing that jumps out at us about these cards if we look at them all together?

[00:00:52]
They sort of stack on top of each other and they're. Yeah, they're kinda gross, right? I'd like to let them breathe a little bit here. So there's a bunch of tools for this. You can probably think of them in your head already, but we'll talk about one of them that you kind of get for free with Tailwind, which is just a little CSS trick.

[00:01:15]
So I'm gonna go as opposed to the website. Let's go into that card-list. And you can see as soon as I put away some ui that all card list is the div that happens to have four cards in it. And Tailwind gives you some utilities that you could totally write yourself in CSS but are just kind of somewhat nice in this sense.

[00:01:42]
So one of the ones that we can use is the space-y. The nice part is you can hover over it and see what it does. Visually, we can see exactly what it does, right? If we hover over the CSS, we can kind of get a slightly better sense where if it's not the last child, put some margin on the bottom or end in this case.

[00:02:13]
And so that basically applies it. So it's all of them, but this one gets no margin at the bottom, right? And that's just using this looks a little bit squirrely, but basically it's saying for each one where it's not the last child. And there's ways you can do this with stars too.

[00:02:29]
Go ahead and add some spacing in between all of them, right, and you can just very quickly and easily you can guess what space x does, right, not the company, it does between if they're horizontally. So if you had a bunch of buttons, you could do space x2 and put some space between each of those buttons.

[00:02:50]
It has another fun friend, which is gonna look a little weird with these cards, but we'll get the point, which is divide-y and we have to do divide over here. Perhaps they don't work with the live coded cards, but that's fine. We have examples. We saw before there's space-x, space-y.

[00:03:14]
It'll add some space in there. Here's the horizontal version with some random buttons. Effectively, it's a little more complicated than these days, but this would also effectively show us what we're doing as well. Divide just puts a solid color in between each of them. So we've got the divider, we've got the overall background color for the div, so on and so forth.

[00:03:36]
I have never actually purposely used divide on purpose, ever. I use the space all the time. You can change the color of the dividers, but basically it puts something you can kind of see in between each of them. I've always just used space, but you can mix them up if you're like, what about flexbox?

[00:03:54]
Flexbox also works in this case and we'll look at flexbox in a second. There are some times where the problem with flexbox is that it makes everything inside the flex container a flex item, which could change things in ways you don't want. A lot of times this, because it's just adding margins will get you most of the way there.

[00:04:16]
So this is here if you need it, but if you're like, I'd rather just use flexbox, I get it. That's cool, you should do that. I do that too. All right, If I'm just doing it to add some space I will use this tool, if I feel like I'm also doing a bunch of other flex stuff.

[00:04:33]
No harm in using flexbox, but if you find yourself like, I wanted to use flexbox, but now I'm doing this other stuff, and I was about to. Every time you think you need to reach for some kind of custom CSS, you probably don't. There's probably something. And so if flexbox feels more appropriate for you, go for it.

[00:04:51]
But if you're like, I couldn't use flexbox because reason I needed something, so then I had to write my, you probably don't. Right, it's like most things that I think about with most libraries or frameworks, which is if you feel that pain, everyone else probably feels that pain, or you're doing something wrong.

[00:05:07]
But if you feel that pain, everyone else feels that pain. And if everyone else feels that pain, there's probably something in the library that does it for you. Or there's also the chance you've gone to a weird place and you need to rethink things. But generally speaking, that applies.

[00:05:23]
And we are gonna play with that card spacing multiple times. We'll take a look at it with the spacing. Let's later, we'll go and change it to flexbox. After that, we'll go change it to grid, just for funsies, and play along with it all the way and see how all of those apply.

[00:05:38]
So that's kind of our first foray in there as well.