Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:41 minutes
Grid400 2
  • Overview
  • Transcript

2.3 Working With Grid Template Areas

Grid areas are an amazing feature of CSS Grid. In essence, you can create named areas which you can then reference to position grid items. It’s a very simple and intuitive way of creating layouts. Let’s check them out.

Related Links

2.3 Working With Grid Template Areas

Grid areas are an amazing feature and this is a gristle layout. And basically allows you to define certain areas and then position your great items by referencing those area, its a really simple and intuitive way of creating a layout. So let me show you how to do it. Here I have a simple structure. Inside my body I have a header, main, aside, footer. All of them has a class of demo for proper styling here, but that has nothing to do with CSS Grid Layout. Now inside the body I set the display grid, give a grid gap, and set some dimensions for the implicit rows. Now to create grid areas, you would do the following, grid-template-areas, and then you'll specify a bunch of strings the following way. Just bare with me on this and I'll explain how this is working in just a little bit. So I'm gonna say header, header, header, and then content dot sidebar. And then footer, footer and footer. Okay, so what did I do here? Well, I basically created a grid that has three columns and three rows. So on the first row, all three columns have the header area name. On the second row, the first column has the content name, the dot signifies an empty cell. And the third column has the name of sidebar. On the third row, all three cells have the name of footer. Now, if we take a look at this grid using the developer tools, and I choose to display the area names, notice how this is looking. We have header, header, header, content, empty space, sidebar, and then footer, footer, footer. So this is how we defined our grid. Now, we still need to place on these grid items on the grid. So we can actually see the proper structure here, right. So let's go ahead and do that right now. To place the items all we have to do is say header, and header being the header element from our HTML. We would say grid-area: header. So what will happen is that our actual header will occupy all of the areas that have the name that we give it. So the name that I set here is the same name that I set here, okay. Next what we have the main which is our main element from the HTML, gonna say grid-area: content, right. So our main is just gonna sit and write here and then we have the aside, I'm gonna say grid area: sidebar. So now the aside will sit in the sidebar area right here, and finally the footer, I'm gonna say grid area footer. So that will place the footer or it will make it occupy all the grid areas that have the name of footer. Now with this I can get creative, I can do whatever layout I want. So let's say that I want my footer to be in the right side here, okay. So I can comment this and I can say grid row-start: header. So I can tell it will start the footer where my header area starts, which is right here. And I can say grid-row-end: sidebar. All right, so I'm gonna get this bit. So, as I said you can do all sorts of layouts just by using this area names. Now, we were able to create this structure because we didn't have an explicit grid defined. We just had an auto rows declaration here that Right now it doesn't actually do much. So let's create an explicit grid. So I'm gonna say grid template columns, let's do 1fr, 1fr, 2fr, 1fr. Now see that we have an extra column here. But our template areas decoration doesn't cover that and here's an important tip. If you're explicitly defining the columns like this, the number of items you put here separated by a space should be the same number as your columns. So here in order for our header to fit the entire length we've got to add header. So let's say, sidebar sidebar here, and footer footer footer. Okay, so now my sidebar is on two of these areas, my content is on a single one header and footer on both occupy four areas. But maybe I want my content to be a lot bigger so I'm gonna save this. I'm gonna add a dot to create an empty space here and then I'm gonna have the sidebar. So using this method you can really create any kind of layout that you want, it's super super simple. Now speaking of naming things, you can also name grid lines. And I'll show you how to do that in the next lesson.

Back to the top