Grid Exercise

[00:00:00]
>> Steve Kinney: What my challenge for you is again, we can remove some of the ones. You don't need as many boxes as you want. What we kind of do is want to get that traditional blog layout where you've got a header going across the top, a sidebar either side, your choice, and a footer.

[00:00:17]
The sidebar should be a static amount and kind of get that top, bottom, that master detail view that all the time we see in macOS apps, where we would see something along the top, any kind of webpage we've ever seen before, the header, the footer, and then two columns in the middle.

[00:00:33]
But responsive, we want a one column layout. So we'll start out and I won't totally give you the answer just yet. And honestly the exact details are kind of, I'll leave it as an exercise to the reader. We don't want that order there either. That's that min height killing me there.

[00:01:04]
And this row span three. Just cleaning up everything. And you can use as many of the nine as you want and everything. But we wanna ust kind of have that header, footer, sidebar. But where it starts out on mobile, something closer to this, right? And then kind of as we grow out, like this should be along the top.

[00:01:22]
These should be siblings to horse's side. And maybe 4 is a footer. If you wanna have more in there, you wanna have two sidebars, have fun, do it, I'm here for it. Any of those that make you happy, whatever kind of layout that changes, right? But our job is to mix some amount of the ordering, the spanning and the break points for some layout that makes us happy.

[00:01:43]
If it's something slightly different or something that like applies to you, go for it. We can try out different versions together in about 10 minutes, I think, just to play around with it. And we'll try out different ideas and try some challenges out like that, but definitely try again.

[00:01:58]
We want to mix the breakpoints, the ordering and some of the Colin and Roast band to try a few of these out for ourselves. The kind of goal that I'm going for implicitly is like this kind of pattern, not that pattern. We've got a sidebar, we've got the header along the top, we've got the content, right?

[00:02:25]
As you can see, the sidebar always stays. I'm zoomed in, so I get to that mobile view real fast. We get a single column in mobile, the sidebar kind of moves up. The header always takes up the full width, so on and so forth along the same line.

[00:02:40]
That you kind of commonly see in this case, the goal is to take this very simple stack layout and kind of do some of the more traditional layouts we might see. Again, I am happy for challenge mode, but let's do the assignment first and get to the point where we would like to have everything else in place.

[00:03:07]
Okay. So this one, the challenge is somewhat straightforward where we might. What we wanna do is kind of have this eventually get to that kind of sidebar kind of piece where these stack at some point. And so I think grid calls one for starting out with seems great.

[00:03:30]
And that is effectively the default. So as you can see, nothing really changes when we get rid of that. Effectively, at the largest, it is grid calls two. Unless we decide to do two sidebars, which, you know what? Just to make things interesting for ourselves. Why not? I'm feeling spicy, I need a challenge.

[00:03:58]
So we wanna have a main body in the center. Two sidebars, whoa, right? So that we know that at least let's say large, we want to do grid calls three. That is not going to get us there just yet, because that is not what I was looking for.

[00:04:21]
So what we want to also say is, for that top and bottom, we'll say at the large breakpoint, we're gonna say that it is a grid calls three as well. So it'll span all three. That's not what I want. I don't want grid-cols-3. I want call span three.

[00:04:40]
Call span three. Cool. And so we've got that for the top piece, right? The bottom will do the same thing. So at the large breakpoint. Nope, col-span-3. Look at that. We're getting there. We're getting there. I like it. Cool, cool, cool. And so, then we wanna kind of get these to, that 3 takes up most of the space, right?

[00:05:19]
And I kind of feel like, cuz I get to make my decisions. So I let you make your decisions when you did it. I kind of want the sidebars at that point to be kind of, like, fixed in size. So I'm gonna say that instead of grid calls three, we're gonna say the first column should be.

[00:05:42]
I think 20 rem is what I put on my site. We'll have the middle one take up as much space as it needs. And that second bonus sidebar, let's have it be smaller. Maybe it's like icons or something. I don't know. So now we kind of get to, we have these two sidebars that work the way they're Supposed to work.

[00:06:11]
And we've got that other piece there as well. We can even say that the height should be. Well, it's actually, let's say the height goes at large will be. So H screen is another just fun one that wasn't worth dedicating all the time to. It's just saying height should be 100 view height, right?

[00:06:41]
So that's the full size of the screen. And so now we have another problem here, which is we need our rows to kind of be laid out correctly so we can do something like there's a bunch of ways I could do this. I could give the header a max height.

[00:07:01]
I don't hate that. But let's try LG grid rows. Do something similar. That is too many REMs. 20 rems, that's a lot of rems. Right, and we kind of get something similar there as well. Let's jack that down to 4. And so now we get this stacked layout on mobile and then magically as we get bigger, we get this kind of more like blog like layout.

[00:07:56]
And again, did not take. Now remember, for the grid columns and grid rows, you can either give it a number and that will work and that will give you evenly sized ones. It's basically repeating. Like it's basically. They'll take up an even amount. You can also. And that underscore is a space in this case you can kind of see what it's doing under the hood, which is if we look at the CSS that's generated, it's saying Grid Template Columns 21 FR10 and just putting some comments in there so you can see the pixels.

[00:08:26]
Because none of us can do that math in our head. Did I print out a REM to pixel to tailwind size thing at my desk at one point? Like a dork? Yes. But then I just learned to just hover over stuff and not do that anymore. And now I'm not embarrassed when people come over.

[00:08:49]
So yeah, we can put in arbitrary values and like we said before, you can put in arbitrary values whenever. Now what I will warn you is that like if you do it too much with your colors and stuff like that, right, like it gets weird. You should probably do that in the theme, so on and so forth.

[00:09:09]
But like for stuff like the grid where that's usually almost always like a one off thing, it's totally legit versus having to jump back to a theme for a one off question. Cause you're kind of like defeating the purpose of tailwind at that point.