Grid

[00:00:00]
>> So Grid works a little bit differently. While I could make a pretty picture for Flexbox, I stole these from Mozilla. And so with Grid you have effectively the same idea. It's just that the axes that they are applied to are slightly different. So here you've got the, because you don't just have one axis.

[00:00:22]
Like flexboxes, they're in a row or a column, which is just a row turned. With a Grid, you have the inline row axis here. And then you've got the block axis. Same basic idea. There's just more than one of them in this case. And so you've got same thing we saw before, justify a line in place.

[00:00:45]
Place is just both at the same time. If you do place content or place items, it is like doing both align items and justify items. If you do place content, it is like doing both justify content and align content. My biggest problem is most of the time I want align items and justify content.

[00:01:07]
And so I could, that's the place where it's like, all right, maybe that becomes a utility method or something along those lines. I'm into it. I don't do that, I just do it by hand every time because now it just makes sense. But that's a place where I could get talked into it.

[00:01:22]
So again, we have the same basic idea. And I'm gonna give you a challenge in a second. But we have the same idea of the Grid playground over here. So we'll hop on over to that. And again, you can see right now there's not this is all the defaults on the Grid, which is not really a lot happening here.

[00:01:39]
But you could get a sense of saying, okay, I want, and the nice part is a lot of the syntax. And you will need some of the syntax of the fractional units and stuff along those lines if you wanna do really special stuff. The grid classes that come in tailwind are not great for that full like, I wanna have an application with the sidebar and the header and stuff along those lines.

[00:02:06]
You will end up either using those arbitrary values or writing some CSS. But if you're like, hey, I've got a bunch of images that I wanna lay out in a grid, or I have a bunch of items that I wanna kind of put somewhere in the page, the grid classes that come in tailwind are really good for that.

[00:02:23]
So here we can kind of take, we say nine columns which is nine things a little much. So we can say three columns, right? And then we get a sense of we got three columns and we can say that, the aligned items, we'll say they should stretch. No, I think I want justify stretch.

[00:02:42]
Nope, justify content. All right, start with the gap first actually. This is why this exists, right? So we can grab that, we say two columns, right? We can say that for the items, that's what I wanted, the items we want them to stretch. He says, nope, the end, the start.

[00:03:14]
And again, I have to link the little one-offs in here too. So if you're worried about the combination of some of these, so we can put them in there. So we could say like, okay, I want the items in the center and I actually want, justify items also be in the center.

[00:03:29]
So now they'll be like in the middle of their grid boxes in this case. And again that would do the same as if I just get rid of both of those and I do place-items-center. Same effect because all place does is it combines align and justify into one statement.

[00:03:50]
And so that was what kind of put them all in the middle in this case, like that. I've gotta figure out exactly what the right mix is there for what I wanted. I don't actually want them to take up the full area, but now I'm just like. You also have the various, you can do it by rows, not particularly exciting, and these various grid auto flows, which, that's for the columns.

[00:04:18]
Grid-flow-row, so on and so forth. For the most part, you are probably starting from a design and playing around with it, but this is a great way to experiment and see what you want as well. Again, that place-item-center, but we only have one row. We turn this into six.

[00:04:34]
Let's turn it into six. I want six columns. Right, and you can begin to lay out stuff differently. And again at every viewport you could choose to do something differently here, right, and how they kind of go so on and so forth. Then we'll talk about how to do the more advanced grid layouts in a second, but it is.

[00:04:57]
I will show you and you will make the decision if it just writing through CSS makes a little bit, Grid on CSS makes a little bit more sense to that point. But yeah, you can kind of play around this and get a sense of whatever you're trying to build out and see how it would lay out as you go through.

[00:05:14]
I am gonna be real honest with you. I tend to actually find that I can solve a lot more of my problems with Flexbox and like idea of nested flexboxes than getting too in the weeds of some of the Grid. And there are advantages and disadvantages to both, but like for a lot of the layouts I have to build on a day-to-day basis, sort of like nested flexboxes does an amazing job sometimes as well.

[00:05:36]
And I have like a little piece, that it's kind of like recommended, not recommended, at your leisure kind of talking about some of the trade offs on both of those as well. And I think it's done in the appendix, yeah, of just like the kinds of different advantages of both.

[00:05:52]
But the biggest thing is kind of just understanding the justify and align, place and then the content and items because they are named slightly differently. And like I said before, I wish I had a really great heuristic for you for memorizing all of them, but I think some of that is just time and play it around experimenting, right?

[00:06:10]
I am at a point with Flexbox where I can probably think it with my brain and get it done. Grid I still have to like fly around a little bit because I do a lot more Flexbox than I do Grid so at this moment in my life.