Learn how to create a 3-column layout using grid-template-areas.
- [Instructor] So, looking at the code, we're gonna start out with the container div on line 15 and then the page will have five different sections. On line 16 we have a header with a class of main-header, on line 19 we have an article element with a class of main-content. Then after that two different asides, the first is on line 22 with a class of related-links, another one on line 25 with a class of ads and then finally on line 28 a footer element with a class of main-footer.
Now, at a narrow viewport width as we see here, we're already at a good layout and they're in the right order all in one column but we're going to go ahead and put them in a grid because we'll be using grid when look at layout for wider viewport width. Going over to the code on line nine, I'm gonna style the container element and I'm gonna give it a display of grid and then also on the next line add grid-gap of 20 pixels which will give it some space in between the grid items. Going over here to refresh, the only change is the extra space from the grid gap.
I have one column in the grid with five rows. I can turn on the dev tools here and that way I can see where all the grid lines are and where my columns and rows are. Next going back to the code, we're going to assign a name to each space in the grid using grid-template-areas. We'll call them header, content, related, ads, and footer. Next we're going to assign a name to each space in the grid using grid-template-areas. We'll call them header, content, related, ads and footer.
Each is going to be between quotation marks in one row and we only have one grid item per row right now. So, after the last thing in the container element on line 12 in my styles I'm gonna add grid-template-areas: The next line I will have header in quotation marks. The following line content in quotation marks. Then related, then ads, and then last footer in quotation marks.
And save and refresh. Nothing happened again but if we go down to the dev tools, we can display area names and see the names for each area. So far they're only names and we haven't assigned the grid items to them yet. Next we're going to take the class for each of the grid items and match them up to a grid area. They're actually already in the correct spot, so this part is easy but once these are assigned, then we'll be able to move them around for the layouts for wider viewport widths.
In the code, the next line on line 19, I'm gonna do the class main-header and then grid-area: header. After that main-content and grid-area: content. The next one, related-links, grid-area: related.
Next, the ads class and grid-area: ads and then main-footer and grid-area: footer. So, refreshing, everything is still in the same order. In the next video, we'll continue with this layout and add media queries to change the layout for wider viewport width.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox