From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

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

Set up the main grid

Set up the main grid - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Set up the main grid

“

- [Instructor] We'll start off by creating our main grid and positioning the grid items on that grid using Grid Template areas. Just as a reminder, the grid container is this body element with a class site. I already have some media queries down here at the bottom that we're using for the cards layout. So I'll just extend these media queries. So here inside the min-width 27 em media query, I'll create a new rule for site. Display grid. And then set up a grid-template-area property. And here I'm going to create grid template areas even though I'm working with a single column. So at the very top I want header. Next I want main. Then I want the sidebar. Sidebar. And finally, I want the footer. You'll notice that I'm not listing out the nav here. That's because we're going to superimpose the nav on top of some other content later on. So let's just leave that for now. Then I need to actually position each of my grid items in the grid using these grid template areas. So I'll grab each of…

Contents