This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.

Check out a free preview of the full CSS Grids and Flexbox for Responsive Web Design course:
The "Grid-area Introduction" Lesson is part of the full, CSS Grids and Flexbox for Responsive Web Design course featured in this preview video. Here's what you'd learn in this lesson:

Jen introduces a method of using to use real names to define areas of a grid item's location by using ‘grid-area’ and ‘grid-template-areas’. Jen codes examples of how to use grid area to layout mobile, tablet and desktop resolutions.

Get Unlimited Access Now

Transcript from the "Grid-area Introduction" Lesson

>> Jen Kramer: So the next thing we're gonna talk about, Grid area, the Grid template areas and the Grid area syntax. Since I've got the document up, this is actually a pretty easy way to explain it. So far we have typically used the Grid column and the Grid row together in a single declaration to declare where we want to have a certain area of our web page designated, where that particular grid item is going to be.

[00:00:28] A different way that you can do this is actually using real names. So in this particular situation, what we would do is we can have a series of classes where we're gonna use a property called grid area. And you give it a name and I have given these particular classes, grid class one, two and three.

[00:00:48] I gave them names like header article and aside because presumably that's the function that they serve in the document. Obviously, you can call these grid areas anything you want, any name you happen to want. So you can call them George, Same and Mary if you prefer, although those tend not to be a self documenting.

[00:01:06] And then down underneath here where we have our wrapper which would be our grid container we can declare our columns, our rows. And then we would declare our grid template areas. So if you look at this, what I have here is two rows. And the first row is, header header header header.

[00:01:27] In other words, since I declared four columns here, one fraction and three fractions wide. What I do here is I say, header header header header. In other words, the header is gonna occupy all four of those columns, make sense? Okay, and then underneath I'm gonna have an aside.

[00:01:46] The dot is an indicator to skip that particular cell, to don't display anything there and then have an article, article.
>> Jen Kramer: So in this particular situation those two articles will wind up being a container with that class too.
>> Jen Kramer: Makes sense? Sort of? Let's see it in action, okay.

[00:02:10] So this is sort of an overview of the syntax we're gonna talk about next, this grid template areas. So feel free to refer to that, you have your cheat sheet in front of you people in class or in the document online.
>> Jen Kramer: Okay, so if we take a look at, we're at chapter 12 here in the documentation, in the files.

[00:02:33] And in the begin folder we're gonna open up grid area.css and gridarea.html.
>> Jen Kramer: And these next few chapters are really short and very simple, because I'm just demonstrating different types of syntax here. So this probably looks familiar to you, we actually had this example earlier. It changes around a little bit at the various dimensions we saw that earlier.

[00:03:02] So I've taken that same example here and you see we have the same kind of HTML. So we have a div with the class of wrapper, we have a header, an article, and then an aside. And then on our CSS,
>> Jen Kramer: We have some stuff already set up here.

[00:03:19] So this is the original grid syntax that I used on this particular example. So we have our wrapper with our grid gap, and then we have our various dimensions called out as grid columns and grid rows. What we'd like to do now was rewrite this using this grid area syntax.

[00:03:40] So I'm gonna go ahead and write these with you.
>> Jen Kramer: So up here at the top with the wrappers where we'll start which is our good container, we're going to have the following. So we're gonna have our grid-template-columns, and we're gonna have our grid-template-rows. And in fact, you can't, of course call these out with however many numbers you want and whatever dimensions you wanna use.

[00:04:16] You can also just say auto, which is what I'm gonna do here. So hey grid, you figure it out. And then, here to our header, our article and are aside we're going to add an additional property value pair. So here under header, we're going to add a grid area.

[00:04:39] Anybody wanna come up with a name for what we should call our grade area?
>> Jen Kramer: How about header? [LAUGH]
>> Jen Kramer: Not to confuse you, of course. Just because I am using the header selector on line 12, from the header HTML tag, does not mean that I have to call the grid area, header, I could call it George, if I wanted to.

[00:05:04] But I'm gonna call it header, because that's pretty self-documenting, likewise, here for the article I'm gonna give it a grid area of, what should we call it?
>> Speaker 2: Article.
>> Jen Kramer: Article, okay. And for the aside I'm gonna give it a grid area of?
>> Speaker 2: Aside.
>> Jen Kramer: Aside, okay.

[00:05:28] Actually I'll call this one sidebar, just to throw you off. Sidebar, because I can, [COUGH] just to show you that you can call them different things. Okay, so then to the wrapper up here on the top, and where this is now working at mobile dimensions, okay. Because we're outside of all of the media queries and we're building mobile first.

[00:05:49] So this would be for our mobile dimension to a wrapper class. We're gonna add grid-template-areas, and usually where I see this written is as follows. So you write out that property grid-template-areas: then usually the way I see this written is on the next line. In quotes we have "header", in quotes "article" and in quotes "sidebar", with the semi-colon at the end.

[00:06:29] So this is telling grid that we're gonna have, basically one row one column, right. We're just gonna stack these things on top of each other at mobile dimensions. We're gonna have header, display first, article, display second, side bar, display last, makes sense? Cool, so if that makes sense, then let's go to our media queries.

[00:06:53] So here in our media query for 650 pixels, we can now erase all the stuff that we put in here before, okay. This is definitely calling out where we want these grid cells to go. But we're gonna call this out now with different syntax so we can call this out instead with the wrapper.

>> Jen Kramer: And then we can say the following, grid-template-columns and grid-template-rows, okay. So in this case as you saw it displayed on the page, we had a skinny column and we had a fat column, right. So for our columns we have two of those but, they're different sizes. So I could call this 1fr and 3fr, make sense?

[00:07:47] So one fraction and three fractions just divide the page into four parts make the right one the fat one. Our grid template rows, we can call this auto.
>> Jen Kramer: However many rows it takes, right?
>> Jen Kramer: And then we can try our grid-template-areas becomes this.
>> Jen Kramer: Article article article sidebar, right.

[00:08:20] So that'll be row 1, we're gonna have three fractions being the articles so we repeat the word article three times. Followed by the word sidebar to indicate that that's our fourth fraction. And then under that the header occupies the whole thing, "header header header header", make sense?
>> Jen Kramer: Then put the semicolon on the end.

>> Jen Kramer: All right, so this is a totally different way of writing exactly the same. The outcome is exactly the same as what we had before with the grid columns and the grid rows and all the different classes. But this time we're doing this using the grid area syntax.

[00:09:04] And we're specifying grid template columns, grid template rows, and grid areas that go on the grid container. What questions do you have at this point before we go into the desktop?
>> Speaker 3: For the grid template rows.
>> Jen Kramer: Yes.
>> Speaker 3: Is auto the default, so do you have to define that or can you just leave it off and it would assume?

>> Jen Kramer: You could probably just leave it off and it will be just fine. Yeah, but for sake of completeness here I've left it on with auto. Other questions at this point in time?
>> Speaker 4: What are the limitations of the names of grid areas, can I use hyphens or underscores?

>> Jen Kramer: So far as I am aware, you can use whatever is legal in CSS is legal here for grid area names.