Flexbox vs. Grid

[00:00:00]
>> Kevin Powell: So we've covered a lot with grid, we've covered a lot with flexbox, but it does raise the question of how do I know which one to use in what situation. It's a very common question that comes up and it's a very good question that you should be asking every time you have to make a layout. My main thing, you'll hear 1D versus 2D layouts. Please, I don't agree with that at all, because as we'll see here, let's open up this demo.

[00:00:21]
Flexbox can make 2D. This is flexbox with flex wrap. I have columns and rows. Now, they behave differently from my grid, but both of them are making columns and rows. The 1D versus 2D is more about the type of control we have. With a flexbox, you're only really controlling in one direction over the other, because we're doing our flex-direction of row or column, and then the rows are all independent or the columns are all independent, whereas with grid, it is really a two-dimensional grid that you're creating.

[00:00:54]
So, that part of it comes in, but if it's creating a layout one way or the other, I don't rely on that. I rely on, is it a structured layout or something where I want the children to have a big influence on it. On this example at the top, the children are deciding what the layout's going to look like, and we get kind of a randomish layout, but that might be what you need. Intrinsic layouts where things are going to be the size they need to be, we're not having to fight around, try and manipulate things.

[00:01:21]
Flexbox is great, and then when you need your more structured layout, it comes into very, you know, three columns, and then the layout just works, then that's where grid comes in, and then we can make them both responsive, and there's no major issues with any of them, as we've seen so far. The other thing that's really important is that it's not one or the other. I've had lots of people who are like, oh, I'm using grid on this project, and I'm like, well, you don't have to pick grid or flexbox, they work really well together.

[00:01:51]
So let's dive into this example here where this e-commerce card, or it's more like a portfolio with a whole bunch of cards on it, but we have two different pieces. So here, there's these like tags to say the different types of things that this project covered. So on my tag list here, well, we've already seen this a bunch of times and I'm going to keep repeating it because this is the best thing flexbox is for.

[00:02:16]
Display flex, gap of 10 pixels, and a flex wrap of wrap. And all of a sudden we have these all come in, and that's exactly what we wanted. They're each the size that we want them to be. We don't have to try and play with it, manipulate it, do anything with it. Doesn't matter if there's 10 of them or 3 of them, it just works. And having the flex wrap on there means they wrap down and they wrap up, and everything's, it's intrinsic, it does it, we don't have to worry about it.

[00:02:44]
The browser handles everything we need there. Amazing. Then on the outside part, we can come in with maybe this is just a class of grid. Grid. And I can do my display grid and then a gap here, maybe a little bit bigger, and we can say that this is a grid template columns repeat 3, 1fr. And now we have our three-column grid on the outside, which is exactly what we want, some three just three columns, they all just flow down, everything's working.

[00:03:26]
Structured layout on the outside, and then these guys on the inside, they're adapting to that layout that they're living inside of. So as these columns are getting bigger and smaller, those pieces inside can adapt the same way they were working before. So don't base it on this project is this or that project is that. Look at it on a case-by-case basis. These little things, I don't want to have to worry about how big they are.

[00:03:46]
These bigger pieces, I'd like to control it a lot more and have a structure behind it instead of all of a sudden letting the content decide how big every element should be, and then you're sort of fighting it along the way. I will say also that I tend to use grid a lot more than I use flexbox these days for any developer who is around pre-grid. We did a lot of layouts, or every layout basically with flexbox.

[00:04:08]
We didn't have a choice, and even before we went from floats, and then we got flexbox, it was, yes, we don't have to do hacks anymore. Flexbox is here, we learned how to do a lot, and that led to lots of ways of using flexbox to accomplish a lot of layouts that sometimes are more complicated. So don't look necessarily at patterns that you're coming across, especially if there's lots of manipulation going on on the inside on the flex items to get that layout to happen.

[00:04:33]
We saw an example, I did show one where we were doing that main area with a sidebar, and I did have to, it's a cool trick. It works really well in some situations, so I'm not dismissing it. I think it can be a useful pattern, but it is one where you're sort of playing around with how flexbox works instead of just going, maybe I'll throw a media query on here and handle it that way instead. So grid more and more has become something I'm using for most of the things, and then those little elements that I just need them to behave, however they're behaving has been more of where I lean towards.

[00:05:04]
So navigation, tags, and a lot of smaller elements like that. But don't necessarily think of it big picture versus small picture. Think of it on a case-by-case basis of do I want my parent controlling a layout, creating a structure, or do I want the children to have an impact on how the layout is actually going to look.