From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 23,200 courses taught by industry experts.
Set up the main grid - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
(Locked)
Different off-screen navigation options2m 7s
-
(Locked)
Off-screen to cover navigation overview2m 43s
-
(Locked)
Set up the main grid3m 36s
-
(Locked)
Position the navigation area on the grid4m 15s
-
(Locked)
Hide the navigation area off canvas1m 50s
-
(Locked)
Create a reveal effect using JavaScript3m 45s
-
(Locked)
Improve accessibility of off-screen navigation3m
-
(Locked)
Overview of sliding navigation panel1m 15s
-
(Locked)
Create an overflowing grid3m 30s
-
(Locked)
Slide content in and out of the canvas4m 7s
-
(Locked)
Bonus: Animate the sliding effect6m 53s
-
(Locked)
-
-