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.

Create an overflowing grid

Create an overflowing grid - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Create an overflowing grid

“

- [Narrator] In the exercise files for this movie you'll find the exact same example we've been working with so far in this chapter, the only thing I've changed is the title, so it's now called Shift-in off-canvas navigation, that's because we're going to have the navigation shift in from the left, and then have the other content shift out from the right, so we're shifting the entire view. Right now though, the menu is sliding out on top the other content just like it did before. That means I need to make some changes and here I'm going to employ my favorite development tool, which is being lazy. I want to do as little as humanly possible to make this happen. And that means I'm not touching the HTML, I'm not touching the JavaScript, all I'm doing is changing the grid layout and where things are positioned within the grid, because CSS Grid allows me to do that. Here's what that looks like. First, I need to create a new column for my menu, and I'll do that at the first media query here…

Contents