Build a Card with Grid Areas

[00:00:00]
>> Kevin Powell: So, the example we were just looking at with random boxes was great, maybe potentially a bit confusing. I want to look at a little bit of a better example with this one here. It's a bit more real world. Didn't have a use case for it in the project we're doing, but I wanted something that we could sort of solidify the concepts we've been looking at so far. So it's to create a card like this, but at larger screen sizes, it looks like that, and we're rearranging the content a little bit.

[00:00:25]
Not always when you rearrange content where you need to be using grid areas, we saw before one column to three columns, we don't need to, but as soon as I see things like this, which is living between two elements, all of a sudden going somewhere completely different, that makes me think grid areas will probably help me out in something like this. So there's a CodePen down here if you do want to follow along.

[00:00:49]
And what we can do is, let's start off at the very top and just take a look at the HTML. I have a profile. We have an H2 up there. I've given everything a class name. We have the profile image, a social list, which is these icons down here. A graphic designer, which is our profile position, and finally, the profile info. So if I do a display grid here, first of all, it's disappointing because nothing happens.

[00:01:15]
We just get the same layout that we had before, but now all of these elements have become grid items. So that's kind of useful, just that they're all direct children. One thing, I don't know if I said it or if I did, I might have passed over it a little bit. We have these LIs that are here. These are not grid children. It's only the direct children of the grid. So this UL becomes a grid child or a grid item.

[00:01:41]
These ULs or, sorry, these LIs here, they're still whatever they were before. They're living in that context. The styling here is a little bit different if you want to see, there's extra code down at the bottom that's giving us a bit of a starting point, but we're using flexbox for that. But whatever, it only goes one level deep. There's no inheritance coming in when it comes to a grid item. And inside these grid items, well, you know, they behave differently, they've moved into being a grid item, they're stretching, they're doing different stuff, but on the inside, they're going to work the same way a regular block level element was working before.

[00:02:11]
So there's nothing strange that's coming on their inner behavior, it's only their outer behaviors that have changed. So we have that display grid right there. Now, I want to use grid template areas. We saw that layout that I had, let's just look at it quickly. To, well, basically I need to assign each one of these a name. So we'll start off at the simple level. So we'll start off at the simple side and just actually name them all, and the names we can be, again, it's whatever name makes sense to you.

[00:02:44]
So grid template areas and I always go on a new line. You don't have to go on a new line. I just find it makes it easier for formatting, and we have the name at the top, so I write name. Then under the name, we're going to have the image. Under that, we're going to have our social links. So we'll just call it social. Then under that I have my position. And I'm going to call it info just because my class was position info, so we can call that one info.

[00:03:13]
The one thing I always forget to do when I'm writing out my grid template areas is to put a semicolon at the end of them when I've written them out this way. So just keep an eye out for that because you might start writing more styles after you come down. I don't know, we do. Let's say we do our gap here, to rem, make it really big, it's broken, nothing's working, you can't figure out why, missing semicolon there, just because we did so much stuff, it's very normal to forget that.

[00:03:39]
Now we can see the gap has actually kicked in. I'm going to make this gap one rem. It's a nice small size, that looks okay. Remember, this can cause really weird things to happen if we have grid template areas, but we haven't assigned anything, so we can also then come in and say grid area is name. Grid area and this is right away, grid area is image. This is when the, as you're doing it, you're like, is this worth the effort?

[00:04:10]
As you're assigning, I think I called it social. As you're assigning grid areas, it always feels like, oh my God, I'm spending so much time on this. I probably could just use something like line numbers if you've learned about line numbers and that would work fine. And I agree you could do it that way. But once this is set up, that's where you start getting a lot of the new stuff that becomes available to you.

[00:04:31]
Doesn't take that long to do, unless you have like 30 items, which I hope you wouldn't, I don't think you'd want a weird complicated grid, but you never know, it could still be useful. Okay, so we've got them all working. Now we need to do another thing, text align center, because if we look at the layout at the smaller screen sizes, everything was text align center. So let's come here. Text align center.

[00:04:56]
Oh, that didn't do what I thought it would. The text center, that's fantastic, but my image didn't, and my list down here didn't center. They wouldn't know why block elements. So, good thinking in a way, but in this case, they're not because they're grid items, so the idea of the block and the inline goes out the window, but it's in that vein of because they're grid items and they're not going to center like text with inline elements, you can do a text center on other stuff, even if it was a block, like an image, well, images you sort of can, but they're weird, but I need these guys to be centered.

[00:05:39]
If text align center doesn't work, what would work? You need the grid justify grid, justify, yeah, justify. Now is it justify items or justify-content? Items, items. Is anyone else going to say content? Everyone said items awesome. Justify items center. And oops, I made a spelling, a spelling, mixing, justify, mixing up a few words in that one. Justify item center, and we get there. We do items because it's turn off, let's turn that off for a second.

[00:06:12]
Again, if you're not sure, use your grid inspector. Grid inspector is your best friend. We have a very big cell. I want to align the elements within their cell. If I want to do it within a cell, that's where items come in. We're not trying to manipulate all the content, we're just trying to take the pieces of content and manipulate their positioning within their cells. Do you still need the text aligned center?

[00:06:35]
I do need the text aligned center still because the, it's, if not the text, like we have a block of content, so the text aligned center saying that block is staying there, we want the text in that block to be centered, and text align is inherited, so I could come on each one of them and declare it individually. Here I'm relying on inheritance just to declare it on the parent and have it come all the way through.

[00:06:54]
Awesome. So that's actually looking pretty good, and that's off, we're off into the running. But now if we get to larger sizes, the whole thing falls apart. That's where we want the grid areas to come in. I've been nice. If you come down here, there is already a media query set up so we can come in here and use it. There is a difference here. I didn't nest this media query, so if you haven't seen media queries before, it just means you need to redeclare the profile inside here so we can start writing some new styles on it.

[00:07:26]
If a media query is nested, it just means those styles apply to what it's nested inside of. If a media query is not nested, you write the styles in the selector inside there and then write your CSS normally. So, we want to change our layout now. We want the image going all the way down the side. We need the name, the position, the description, and then the social list here. Whenever we're doing grid template areas, we're thinking along the column first.

[00:08:00]
So my column, I need my image, then my name, then my social list. So we'll start with that quotation marks. That was our name or no image, I should say image name, social and I might have missed something along the way, like grid template areas. Unknown word on line 36. Thank you. I do this all the time in media queries. Thank you. Grid template. There he is. That would help if we had the declaration and not just the value, so it didn't know what to do with that.

[00:08:28]
There we go. So we've got that first one, but again, now things have gone off the hinges. Don't panic if this ever happens. It's because we've only set up one of our columns. The other stuff doesn't know where it's supposed to live now, because we hit this media query, we only have three places that we've assigned. These other ones are, it's going kind of crazy. So we go to our second one. Let's look at the image.

[00:08:56]
We have our image still coming down, then our position, we can decide what we want to do on that side. So, once again, image, then it was position. I'm just going to write position again, this could be an empty cell, could be, I guess, the social list. It looked kind of empty, but we'll leave it like that. Because maybe you have a really long title, you want it to stretch across, depends on the layout you had there.

[00:09:25]
And then finally we have the description or the info section down here, which we definitely want it to go across the entire thing next to the image. So we say image info, info, oops. And not too bad. We're getting there. The layout looks all right, but obviously now our text alignment is an issue. So that's easy to fix. Same way that we redeclared our grid template areas within a media query, we can redeclare anything we want in here.

[00:09:54]
So now our text align becomes start. That did something, but not quite as much as I was hoping it would do. So why is graphic designer all the way over here? Yep, it's being justify centered. Yeah, exactly. So we've already gone all the way up here. We said we have justify item center, so it's listening to us and doing that for all of our items. We don't see it with this because this item's taking up all of the available space.

[00:10:21]
Again, if you're kind of confused, open up the inspector. Put on that grid, can I find it? Grid, we can see we have this really big cell, and there's that element in there. Add background colors or outlines to elements so you can see them and you'll see it's this little element in a big space. We want to make sure it's on that end now. So we just do another little redeclaration. We can do or justify items should also go back to start.

[00:10:56]
And those will move over. One last problem. Come look here, I want this in the top right over here. It's stuck over here. If I'm using justify items that's affecting everything on the page, what can I use to move only this one? Yes, Ryan. Justify-self. Yeah, nice. So that's justify-self. I only want to select that one thing and tell it where I want that to go within the cell that it's living inside of.

[00:11:30]
Because if we take a look once again. Not the body grid, but this grid. It has a really big cell to live in. It's now lined up to the start of it. We want it to go all the way to the other side, which would be the end of it. So we find that one. That's our social list. And we use a justify self of whoops, and end, we want to send it over to the end. And it pushes on over all the way over there. So this is where you start seeing, first of all, the grid template areas, I think redeclaring them within different sizes really starts to pay off.

[00:11:52]
But while we're doing that, there'll be small little tweaks, small different changes that you have to make. So we're always sort of layering all of these different things that we have control of together to get these layouts to work the way we want them to when we're using grid.