Grid

[00:00:00]
>> Steve Kinney: Just a minute or two, I'm gonna switch gears to talk a little bit about grid. So what I'm gonna pull up is just going into this grid playground over here. We also have one next to the Flexbox playground where we can play around with some of the properties visually as well.

[00:00:13]
But we'll check out what those ones in a second. Let me just kinda switch gears and we'll do that. So the other Flexbox is good for like one direction, right? If you just wanna lay out like you can nest Flexboxes, you can do a whole bunch of stuff.

[00:00:28]
But for more complicated layouts, we usually end up relying about on CSS grid. As I've kinda repeated multiple times, Tailwind does not add new features to CSS grid, right? In fact, Tailwind 3, since it was using post CSS could add syntax that doesn't really exist. Tailwind 4 has a little bit of a vite thing going on to add the theming and stuff along those lines.

[00:00:58]
But it is effectively just using CSS, just with a lot of abstractions that make it way easier to do things that might have been very verbose and complicated. So right now there is not much of a grid to speak of in here. In fact, there is no CSS grid in this case.

[00:01:16]
There are just a bunch of boxes. We'll take and remove some as well, but it is just a stack. And so the easiest way to no one's surprise on how to set up CSS grid is you type in the word grid. And now you have a CSS grid which looks like it did before.

[00:01:41]
In fact, slightly worse cuz there's no space. I can do it grid gap-4 and we can see that now I've got a gap of 4. But the flexbox is a way to spread stuff out on a given line. That line can be a column and that line can be a row.

[00:01:59]
Grid is basically two dimensions at this point, right? And you can define one of these and tell when we'll figure out the rest, or css really, you say grid-cols-3. Now automatically, yes, I chose three cuz I know I have nine items, right? We can tweak that in a second, we'll see what it looks like.

[00:02:25]
Grid-cols-3, then all of a sudden we get a three by three grid, right? If I make that, I don't know, 4 or something that's not easily divisible, then you can see that it will line them up and then create a new row automatically based on whatever the remainder is in this case, right?

[00:02:45]
Alternatively, I could say that what I want is grid-rows, I don't know, 4.
>> Steve Kinney: Which, yeah, it kinda gets us one column. Yeah, okay, got it. So we go back to grid-cols-3. And where this becomes super powerful as well is you can have fun with responsive design, where it becomes very easy to change this.

[00:03:17]
So if we wanted to say, hey, well, that's probably pretty small. I mean, this looks cute on mobile. But let's say we wanted to have, we can do this Flexbox as well. It becomes very easy to do these breakpoints where we could say something like, hey, at the smallest viewport, let's do grid columns one, right, and maybe as we go up to a large tablet.

[00:03:45]
So this looks like we can say medium, we say grid-cols-2, right? So now all of a sudden, magically, we've got one column, we get the responsive design of two. And we could say, eventually Excel, and we'll say grid-cols-3, right? And now we can get rid of this. So all automatically, we'll get the flow with not a lot of extra media queries, right?

[00:04:24]
If we hover over each of these and we look, first of all, that is the grid. That's not hard. That's a little squirrely. This is definitely clearer in the class. But as we go over, okay, well, this would have been an extra media query where we'd rewrite that all again and this would have been another media query.

[00:04:43]
So now we can just say we start out and with Tailwind, we always want to start out with mobile. We do that kind of mobile first design, which is if you kind of read this. And this is why that sorting of the classes is super helpful, which is the unprefixed classes come first, right?

[00:05:01]
So out of the box, at the smallest viewport, we have one column, right? As we move up to that 768 pixels or 48 rem. Then all of a sudden the second class kicks in and brings us up to two columns. Great, great, great. They get to Excel which is 1280 pixels and you could very easily change that.

[00:05:23]
And you know that it will be consistent through your entire application, because instead of you putting numbers everywhere and you can do this CSS variables these days, you can actually have these values in there, the grid-cols-3. You can kinda see from the smallest and working out to the largest, how the grid changes.

[00:05:40]
And then without a whole bunch of media queries and just a few lines, you get this abstraction. We can go from 1 to 2 to, if I get rid of the sidebar, 3, quickly and easily with not a lot of fuss, right? And that's cool in a little example.

[00:05:58]
But on larger sites, right, it definitely comes to the point where being able to do that at scale across the site makes things that would have taken a very, very long time and makes them very quick and kind of easy to do in this case as well. In anything in Tailwind, we get to do effectively, you can always break out of Tailwind and do arbitrary kind of selections even in these classes.

[00:06:36]
Most of the built in stuff in Tailwind does kind of assume you're kind of doing standard grids with equal rows and columns. You don't necessarily have to do that, right? You could very easily break out of that as well and a lot of times you do. This is great for a set of cards that I want to do, awesome, neat.

[00:07:01]
But you can also use CSS grid to do kind of more of that traditional blog layout where you've maybe got a header that takes up the full width, a sidebar that's only a portion of it, the body that takes up the rest, and then a footer, right? Some of this is the nuance of actual just CSS grid.

[00:07:20]
But instead of this grid-cols-1, which if you hover over it is just doing repeat, let's actually do three in this case, repeat three times. Columns that are at minimum 0 and at most 1fr and if you're not totally familiar with CSS grid, what is fr? It is division of free space, right?

[00:07:47]
So if you have three things that all take up one unit of free space that you shake up a third, right? And it's only if you have stuff that is a little bit more specific, so let's look at this for a second. I'm getting rid of the responsive stuff for a moment and what we'll do is say set grid-cols-1.

[00:08:11]
We can say it's gonna be a three column grid, right? We'll say that the first column is, I don't know, 24rem or pixels or whatever. The second one is that 1fr, whatever free space is left. And the last one is 57 pixels cuz I hate myself, right? Now you can see that the grid is not even columns.

[00:08:43]
What did I choose? 24rem, this is the 57 pixels and then 1fr is one division of free space, right? And so if I change this, you can see that the kind of static 24rem and 57 pixels stay the same. The 1fr is just dynamically free space at that point.

[00:09:07]
If I could even change this grid, I could add in 2fr, right? So that's two units of free space, which basically means of whatever remains after the 24rem and the 57 pixels, [LAUGH] the 1fr is gonna be one-third and the 2fr is gonna be two-thirds in this weird four column grid.

[00:09:33]
So you can kinda see this is roughly double the width of this one. And as I do the very first thing you ever show a product manager when you build a ui, they immediately do this on the browser. As you can see that for the most part consistently stays a 2:1 ratio.

[00:09:48]
So in fact, you can think about those FRs as free space ratio of 1:1:1. They'll each be a third, 2 and 1 there'll be two-thirds, one-third. I can even just make this simpler, we can do 2fr, 3fr, 1fr. Right, it becomes a division ratio at this point. So now you can see 2, 3, 1.

[00:10:21]
You can see that it kinda keeps that kinda ratio between them, right? If any of them are hard coded with a value, then those obviously take precedence, right? But yeah, and so you can play around with this as well. The other thing we can do with grid is on the actual individual items, right, at this point, each element takes up one cell in the grid.

[00:10:46]
Okay, that seems reasonable. But a lot of times there are times when you would like a given cell to be able to span multiple and you can do that very easily in tailwind as well. So on any given one of these, I can say col-span-2.
>> Steve Kinney: And now you can see that this one will now span-2 columns, right?

[00:11:14]
I can even combine those, say col-span-2, row-span-2. And now that first cell, as you can see, takes up two columns and of my ratioed columns, right, two columns and two rows and begin to do much more complicated layouts, right? We can even say, let's give a row-span of 3 and see how it bumps stuff around.

[00:11:47]
And what's cool about this is these all work with those responsive breakpoints, right? So I could actually say that this is only gonna happen. We'll put a medium in front of this. So by default these will not click in until we hit a medium viewport, right? So out of the box there will be a span of 1 and 1 cuz that's the default.

[00:12:09]
And we'll actually have this only click in. So now all of a sudden when we are mobile we're stacked and as we get kinda bigger, we can kinda change the layout super easily, right? If we had imagine especially we got rid of 8 and 9, you can see a world where you've kinda got this layout on the full mobile and then I wonder if I haven't defined anything.

[00:12:48]
I'm experimenting for now, we say to this one that we wanted to start out with a row-span. No, we'd have to probably give it a min height or something like that. I wanted to see if it would take up three of those but it doesn't.
>> Steve Kinney: Let's just do.

[00:13:14]
>> Steve Kinney: Yeah, no, you could give it a min height though, and it would work. But here it will actually change the entire layout very quickly responsively based on any of these factors and you can very quickly totally shift stuff around. The other one that is a lot of times helpful is this idea of order, right?

[00:13:40]
Right now they are ordered in the way that they appear, then the grid lays them out. Again, this falls under things that you might have thought to do in JavaScript or worse, have two of the same elements and only show one based on the viewport, so on and so forth.

[00:14:00]
There are times where maybe what I want is in this view, I want 2, 3, 4 and 7 over here. In fact, I'm gonna get rid of 5, 6 and 7 just to make things simpler for a moment. Maybe I want this layout, but maybe when I am on mobile I actually want 2, 3 and 4 on top, right?

[00:14:29]
And so, right, I want them above the other one in this case and we'll make one bigger cuz it feels like some kinda hero at this point. We'll say it's got a min height of, I don't know, 96, right? So I want these three above it, but I do want them to the side when we get larger, right?

[00:14:53]
And what I don't wanna have to do is actually start moving elements around in JavaScript, right? And this will work in both Flexbox as well as CSS grid is. You can have basically CSS change the order in which they appear in either one of these, right? And so if I say, for instance, let's just do this to one of them.

[00:15:17]
If I say that is order-1, right?
>> Steve Kinney: You can see that now it's towards the end because the rest by default are all order-0. The highest one goes to the end, right? And so what I could do is actually say, in this case, the first big div is gonna be order-1.

[00:15:44]
And then at medium, go back to being order-0. Go back to where you belonged, right? I can go in here.
>> Male Student 1: Wouldn't it be order-0 and then order-4?
>> Steve Kinney: Yeah, all right, it's just more or less than all of the rest of them.
>> Male Student 1: Yeah.
>> Steve Kinney: Right.
>> Male Student 1: Yeah, yeah.

[00:16:01]
>> Steve Kinney: Yeah, so in this case, I think can I even do.
>> Male Student 1: It would be md order-1 on that particular-
>> Steve Kinney: Or I might do it on the rest of them or something like that too, right?
>> Male Student 1: Yeah, if you did it just on the first one, then it would jump to the bottom.

[00:16:16]
>> Steve Kinney: Yeah.
>> Steve Kinney: Where did I write all this stuff? Go away. Yeah, so order-1 drops it to the bottom, right? Do I still have that on these? No, right. What do we do?
>> Male Student 1: I think you wanna do on that particular one, md:order-1 and then when it gets to that size, then it's gonna be on the bottom, right?

[00:16:43]
>> Steve Kinney: We got two of the same class as one of our problems. Let's get rid of-
>> Male Student 1: Yeah.
>> Steve Kinney: It's just slightly off screen. Right, so now at md as large as here, it's on top and then it moves, right? We kinda even that point, if we wanted this at the bottom originally, what we actually want is order-1 and then at medium go put it back, right?

[00:17:08]
And we could argue is this mark. But now we do get the effect we want at this case, right? And so you can move the ordering around based on different viewports and stuff along those lines as well.