Grid vs. Flexbox Layouts

[00:00:00]
>> Kevin Powell: One thing we noticed when styling up our cards was there was this weird thing where the tags were sometimes the wrong size and debugging these types of things can be a little bit hard. If you ever look at the cards at the smaller screens too, we won't see that happening.

[00:00:14]
So if you run into something where layouts are sort of behaving in an unexpected way, dev tools are definitely your friend. It's what you want to use. And we can see that here, like all the little tags they look fine when we're at the smaller size. But as we get to this larger size and there's two columns, all of a sudden things are a little bit weird and different where we have this bigger space coming there and you can see it, especially I think on this one, the edible as well.

[00:00:37]
And then if we get to three columns, we might even see it more on some of them compared to others. And it can be really hard to understand what's actually going on when these types of things are happening. But if you're using Grid or Flex, which you're probably using, and you probably won't run into these situations without them, I would use the grid inspectors that come built into the browser.

[00:00:58]
Because it just helps you visualize what's actually happening With the grid or Flexbox. You have the Flexbox inspectors. So if I come on this one, if you just hover over with the little selector here, you can see what the grid looks like. But you also get these little pills that show up.

[00:01:13]
And if you click on the pill, it's going to highlight it there for you. And we can highlight that one, and we'll do the third one too, just so we compare the three together. And you'll notice that the grids are actually different from one card to the next one.

[00:01:25]
The spacing here for Morel is like there's empty space under it, where the top one's a lot tighter, and then this one is actually bigger, and that's what's causing these little pills to stretch. And yeah, so we get these differences that are coming between each one of them.

[00:01:39]
And then immediately that means that it's our grid that's causing an issue for this type of thing There's a few different solutions you could use. There's ways of trying to wrangle grid and trying to get it to work the way you want, but they do have to be kinda specific, because grid, there's two things actually that are going on.

[00:01:56]
One of them is the parent is also a grid. So because the parent is a grid. All the items are stretching to fill up the space that's there. And because this one has more content than the one next to it, because we have three lines of text here, so it's just taller in general.

[00:02:09]
This one is stretching to fill that, and then because that one's stretching the column or the rows that the grid is creating has extra space that those things can live inside of. And so when these types of things happen, it's just like, what's the best solution for it?

[00:02:22]
Again, you could do some finagling with grid to get it to work and just shrink those sizings down, but you have to be quite specific, because you're setting you'd have to like, say which one of the rows is bigger or smaller. You can use intrinsic sizes like auto or min content and other things to do it, but you're still doing it.

[00:02:38]
Row by row and on something like a card that you just want it to go anywhere you want. It's probably not the best solution. And what I would say is, if you run into something like this, don't feel like you have to go with the original thought or the initial thing that you did, be very open to potentially refactoring, just changing the approach you did.

[00:02:59]
As long as that thing works across the board, it doesn't cause any other issues along the way. That's what we're gonna do in this case, because with what we want to do in this layout is we just want, instead of the element, the grid creating rows and then the content filling those rows, which is how Grid works.

[00:03:17]
It's why I love Grid because you control through the parent the children fit into it. But Flexbox is the one we saw it with the navigation where the elements just take up the space they need to take up. So in this case, you might go, well, if grid isn't doing the job, maybe on these cards, I actually want to switch it to a display flex and do a flex direction of column.

[00:03:40]
If I hit Save, we'll see that it actually fixes the problem. This is happening because Flexbox, again, on the main access, items are just gonna be as big as they need to be. They're not filling up any space. Each thing, if it's bigger, it's bigger, if it's smaller, it's smaller, and it does its own thing.

[00:03:55]
The children are what are in control of the layout. The reason I went with grid initially is because I needed even spacing in my columns, and I didn't want to have to change my Flex direction, because it was an extra declaration I didn't need. But when you're doing display flex and switching the direction or doing a display grid and just using gap, they're very similar in how they work, but there are a few different things that can happen.

[00:04:17]
So if one of them isn't working, try doing the other one, see what happens. And if it's still something you're fighting with, well then you sort of get into the weeds and you start playing with it a little bit more. But sometimes a really quick thing like this can be a big win.

[00:04:30]
And trust me, I've wasted so much time on these types of problems trying, like, convinced that my first idea was the best one. Please don't be scared of making changes along the way. If the first thing that you set up was working, but then you start running into trouble with it.

[00:04:43]
Always think about the easiest solution you can come up with first, instead of forcing the thing that you're using to actually work. The other cool thing, and this would happen with grid or with Flexbox, this option is available to us is with these notes now you can see very clearly that the taller items versus the other ones, this one's taking up a lot of space.

[00:05:02]
This had all that extra room. That's why the items were stretching out. The rows were getting a bit bigger to fill up all that extra space. Now all that extra space is at the bottom. We happen to have this handy little card note that's down here at the bottom.

[00:05:15]
And if we look at the design, the note is always all the way at the bottom, and let's see if we can find one there. There's a bigger space here, so the note is always stuck to the bottom of the card, and we're leaving that other space there.

[00:05:30]
One thing people don't use enough of with Flexbox is taking advantage of how margin autos work for. Because when you have Flexbox or grid margin, auto works on the top and bottom, unlike in the regular world or the regular block format. So we can come here and say that we just do a margin, we'll do block start to stick with our logical properties.

[00:05:53]
But if you just do a margin top, it would be the same thing. And we can say that it's Auto, and then it pushes them all the way down to the bottom, and it's adding the empty space to the top. Again, if you're in a block formatting context, this won't work, but as if you're in grid or Flexbox, margin, auto will push things around.

[00:06:10]
It's a little bit easier to use a Flexbox just because with grid, it's doing it within its own cell, rather than it just pushing all the empty space around.