Learn how to create template areas and place grid items into them.
- [Instructor] Grid-template-areas allows you to give individual cells in the grid names, and then place specific elements into those grid cells. We're starting out with three columns. We're gonna use the property grid-template-areas to name some of those grid cells. You don't need to name all of the cells in the grid. We're actually going to name a few of them right now. The cells that you give names to will start at the top left. For each row in the grid, you have a set of quotation marks, then inside it, you have the item name separated by a space. Under the container element, I'm going to add grid-template-areas colon, and then on a new line, quotation mark, I'm going to name them apple, space, orange, closing quotation mark, and save.
Going over here to refresh, you can see because I've turned on display area names in the dev tools, it shows the name of each of those cells directly over them. We're going to go back and add names on a few more rows. On the next row, I'm going to do quotation mark, banana, space, banana, and then the next one, quotation mark, plum, space, mango, and then save, and go back and refresh, and you can see all the names. So, you can add names to cells on as many rows as you want, but you have to define the same number of named cells in each row, otherwise, the browser will just ignore the whole thing.
So, you can't have two on one row, and three on another, for example. You'll notice we used banana twice, that was on purpose, and I'll show you why in just a second, but first, a note on how I typed this. You see that we put each row of cell names on one row in our CSS. That's just to make it easier for you to see what goes where. As with everything in CSS, it ignores line breaks and extra spaces, so technically, if you wanted to, you could put all of this on one line, but it's just a lot easier to read if it's on separate lines.
You also might wanna use tab to separate out the different columns. Having them lined up like that makes it a lot easier to see what's what, especially if you have more than a couple columns. So now, we get to the interesting part. Using grid-area, we can take any of our grid items and tell the browser to put it in one of the named areas. So, going back to the code, let's say I wanna take item3 and put it in the mango area. I'm adding a line to the CSS that's item3, and then the property is grid-area colon mango and save, go over here and refresh, now you can see in the mango cell, it's item three.
By the way, you might remember that we used grid-area earlier as a shortcut for grid row start, grid column start, grid row end, and grid column end. Grid-area can actually be used for either of these purposes. So, let's add another one, going back to the code, I'm going to add item11, and then grid-area colon apple, save, and refresh, and there you can see item11 in the apple box at the top left, and one more, let's do item8 and then grid-area colon banana and save, go back over here and refresh.
We've put item8 in banana, and since there were two cells that had the name banana, eight takes up both of those cells. You can do this with any contiguous cells having the same name as long as it's a rectangle like this. If we tried to go back here in the code on line 16 and put another banana on this line, and save, go back and refresh, now it just ignores the whole thing because we didn't follow the rules as far as having a rectangle area. Another thing you can do if you wanna have a cell that doesn't have a name, I'm gonna go here on line 16 of the code, so you can add a period in any spot where you don't wanna give a cell a name, so, for example, replacing this banana with a period, then I save, and refresh, and now the other cells have names, but cell number five right there doesn't have a name because I just gave it a period.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox