From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

3-column layout with grid areas, part 1

3-column layout with grid areas, part 1 - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

3-column layout with grid areas, part 1

- [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…

Contents