Grid Areas

[00:00:00]
>> Kevin Powell: And grid areas, I debated including in this course, but they have a bit of a superpower when it comes to responsiveness that I wanted to get into. I think it's worth knowing about them. It takes a little bit of setup to use grid areas, and you're not going to use it as much as other things. I said we're doing the 25 or 20%, maybe this is an extra 5% that we're going to tack onto it, but they are pretty cool.

[00:00:22]
So I'm going to look at this demo here where I have a 1, a 2, a 3, a 4, so nothing too complicated. And I have them all here just to give them different colors, and as you see, I have a display grid. Now instead of declaring columns, I'm going to declare grid template areas. Grid template area syntax is very different from anything else you've seen in CSS and you basically just draw out the grid that you want with names.

[00:00:52]
It's all going to be inside quotation marks, and I'm going to write 1234. Seems really strange, but I've made a 4-column grid. The names aren't the reason I've done that. These names are, I could call this, you know, 12. It doesn't change anything. I've just assigned it a name. And by writing it out this way, I've created 4 columns with names of 123, 12. If we come and take a look in the inspector, Firefox's inspector will highlight this a little bit better.

[00:01:25]
So if you are in Firefox, and you turn this feature on, it will be under the layout tab. There is show area names. If I turn that on, I get these little tabs at the top, and I can also turn off my line numbers. So you can see I have a 1, a 2, a 3, and a 4. I can't even zoom in on that cause it makes the elements bigger, not the grid inspector thing, so I do apologize, but you can see the names that are there and being created by that seems really strange off the top.

[00:01:55]
I'm going to leave it like that and we're going to say 4 here, just so the names make a bit more sense. And I'm actually going to come onto each one of the items and I'm going to assign it a grid area. Grid area 1, no quotation marks, confusion that often happens there. When you're assigning them, they do not get quotation marks. Grid area 2. Grid area 3. And a grid area 4. Once again, nothing has changed, but one important thing did happen.

[00:02:32]
Each one of these is now being told where to live. So I could do something really weird here, where I could move one from this side to this side. And now item one is here because it's living in the box that I told it to live in. I said the second column is now called 1, so it's moved on over to that area called 1. And what this means is you can actually come in with some pretty interesting layouts where I could do something like a 1, 11.

[00:03:03]
Make a new line and a new set of quotation marks, 234. And I can draw out a layout that I want. When I first started learning about grid areas, I was like, this is cool cause I can understand and like visually see my grid that I'm creating. It's exactly what I see here. The setup of it is long, because you have to create your grid area, then you have to assign every element to it. If you're creating a simple grid, it's not worth it.

[00:03:29]
But when you start getting into more complex layouts, like let's say we do a 4, 1144, you know, even there, you can sort of see something more interesting is happening as well. So the 4 is starting here, going all the way down. You can add spaces here to line things up, no problems at all. You can also, if you have an empty cell, so let's just say we did a 3 dot, like that, it would create an empty cell over here.

[00:03:57]
The dot will always just be empty, you can't assign a dot to anything. Or if you wanted, this will sort of break our layout a little bit, but I could put a dot here. And now 3 is going to fall down somewhere else. It doesn't know where to go, so it sort of breaks our grid a little bit. This is the other thing with grid template areas. If you're using them, make sure everything gets assigned to a cell, because if not, it's really hard to know what's going to happen to the stuff that's not in that grid that you've created with your template areas.

[00:04:30]
You also can't make weird shapes. So if I try doing a 4 over here, it would actually completely break the grid, just stops working because it doesn't know what to do with it, cause I can't have something that turns a corner. It'd be really cool if we could do that, but it can either go across, it can go down, but any other shape, it won't do. It could do a 4 over here. And then maybe a 3. 3. 3. Anyway, not the nicest layout, but we start getting something a little bit more complicated, so you can start drawing out areas.

[00:05:06]
The main payoff for me when we're doing these are when you start bringing in media queries and other things like that. So if we jump on over here, I do have an assignment to a specific area, the quick challenge we don't need to do. This one right here, where I've already come in with a media query. And I've already set this one up, so we have at small sizes. Everything just stacks. We're saying there are no columns.

[00:05:35]
I have a 1, a 2, a 3, a 4 or 5. I've already assigned all those over here. This is in grid area 1, grid area 2, grid area 3, grid area 4, grid area 5. So nothing too fancy happening right there. But using media queries like we saw before, I can say when the width is greater than 500 pixels, we're going to change those template areas. And then here when it's bigger than 800, we're going to change them again.

[00:05:58]
And now, all of a sudden the payoff starts becoming worth it. Because it took a long time to set it up, had to declare everything in all these different places. But now I don't have to worry the children. I'm not making any changes. I'm not changing spans and then media queries down there and media queries in other places and trying to worry about what's happening. The parent is in full control. I just have to redeclare what the areas look like, and we can start coming in with some really interesting layouts.

[00:06:26]
The one really big caveat here is be very careful when you're reordering content with CSS. This is a superpower that has a lot of potential for damage. The main one is, you can imagine instead of 1234, like a silly demo here, if these all were cards that had links in them. So you can imagine if these were all cards that had links in them and we're able to tab through those links, and then all of a sudden the order changes.

[00:06:46]
I've seen this with forms as well. People will make forms using grid, super good for forms. But you change the order to do something weird, and then a person hits tab and you're going all the way to the bottom right, and you hit tab and you go all the way up and it's just really confusing user experience. There is a new CSS property that's being developed called Reading Order that will actually fix that where we can get the visual order on the page to match the tabbing behaviors, not ready anywhere yet as far as I know.

[00:07:13]
So for now, if you're reordering with CSS just be very, very careful about what you're reordering and if there's any interactive content in there because it could cause some problems.