Grid Naming Example

[00:00:00]
>> Sarah Drasner: Here's where we get into some really cool stuff. You can name areas. So for each one of these things, I'm gonna say okay, item a is the header, item b is the main, item c is the sidebar, item d is the footer. So now if I uncomment this stuff, I have that good column gap, the grid row gap and these template areas.

[00:00:26]
We've got a header, some content, a side bar and footer. Let's go back and look at the code a little bit more. Actually, I'm gonna change the view to the side. So you can see a little bit more clearly in this view. What we did was we said that we wanted the header to go all the way across.

[00:00:45]
So we're basically saying that we want, instead of saying repeat five pieces of one f r, we're using the name of this to create that unit. So we're going five across. Then we're saying main, main, main, take a break [LAUGH] and don't put something in here, sidebar. And then we go, footer, footer, footer, footer, footer.

[00:01:11]
And the grid template rows are going to say, I want the header to be 40 pixels to fill up the rest with auto and then be 80 pixels. So I could actually make this header 80 pixels if I wanted to, and then it would drop down. That's a whole layout, right?

[00:01:30]
You could start using that content and this is really that whole header, even though I said header, header, header, header I didn't have to put for dibs in there. Before, remember we had to span all the way across like that. We can really just start making our nav inside here, and you could even use flexbox inside of grid, right?

[00:01:52]
So let's say I wanted to make a nav and I wanted to line up all of the items really quick and you're really flex. You're used to flex-box and you know how to work with it really well. You could put a nav inside there and use flex-box for the items in the nav, totally fine.

[00:02:05]
And it's just all organized based on those areas. I don't have to call them header main side bar. That's a little more eligible for whoever comes along and maintains my code later, right? But I could also call it Donkey pants or something like that. And that would also work.

[00:02:23]
So definitely name them donkey pants and just confuse all of your coworkers [LAUGH]. All right this is our friend, we know him already. This just goes boop boop boop and kind of makes all of these kinda go across. They're just a bunch of items and then that item a has a background of teal yeah?

[00:02:43]
So we've got our usual suspect of display grid. We go all the way across, all the way down. You don't have to go all the way across all the way down too like, right if I wanted to do a height of 50 my grade gets squishy. So you don't have to use it for the entire layout if you don't want to.

[00:03:01]
That's totally fine. Okay, so most of these dibs are gray. But one, is teal. So what if we want this one to layout somewhere else on the page because when we were making all of those grids earlier, we weren't just sticking things in boxes everywhere. So maybe we want it to start somewhere else.

[00:03:21]
Well, we have this kinda grid column start, grid column end, grid row start, grid row end. So there's a few different options here and I combined. I'm showing you two different options at the time. So grid column start, is going to go over here. It's not starting from one, it's not base zero.

[00:03:42]
That's confusing to me. [LAUGH] It's one and two so it starts here. And then it spans across three. And then grid row start is 3. And then I'm saying grid row end 6. It could go 5, wait that is 5, sorry I messed that up. So 3 and then it ends there.

[00:04:08]
But if I say span 2 then it's saying how many it spans. That's kind of intuitive, right? Like one of them is defined by the line and the other one is defined by how much it spans. But this is a long way to write this. That's a very long way of writing all of these things.

[00:04:27]
So we can also write it by grid area. And the grid area goes the start of the row, the start of the column, the end of the row, the end of the column. So it's always .again and again in browsers we do x and then y and then x and then y.

[00:04:44]
When I look at this I'm like, I want to start with y here, but actually if I think about the way that, when we go grab things in the DOM, those boxes are always x, y, x, y, x, y. So it follows that same kinda standard. So we're basically saying, start at 2, start at 3, span 3, span 2.

[00:05:07]
So row, column, row, column, pretty cool? Not that bad. It's like pretty easy to work with, yeah? You can get a lot done with grid pretty quickly. Again, I am not a grid expert this is like me playing around with it for the past few weeks or something like I've done a few great light outs before this.

[00:05:29]
But I am not, I don't know the spec like the back of my hand like those other people that I mention before, but I can go pretty far with it without a lot. Without being a great expert, which is the cool part. I don't have to be the worlds expert in it, in order to make these layouts.

[00:05:49]
So here we are using this thing called Minimax. Minimax is my favorite thing you guys, it's so cool. So with Minimax we're basically saying what we want things to start and end with, without using media queries. Like check this out, item as wide as the content but at most 300 pixels.

[00:06:10]
Item with flexible width but with a minimum of 200 pixels. An inflexible item of 150 across, so look at how it stopped at 200. This one it won't get so small that the content row, if I took the text out it would kind of smoosh even further. But as I go out, it will stop at 300 pixels.

[00:06:33]
And this isn't my example, the rest of them are my examples. But this one is off of the Mozilla Docs, which are the MDN Docs are fantastic. I just couldn't find a way of improving on it, so I was like whatever, I'll just show this. [LAUGH] I kind of wish that we had Minmax for everything.

[00:06:54]
Like, what if you could define H1 sizes with just min max? Like, you wouldn't have to dump everything in Media queries. Wouldn't that be cool? Anyway, [LAUGH] but I think that this is a really fascinating part of it because we just created a really responsive layout without having to put things in different areas and stuff, super great.