Create colums that make the grid wider than the viewport.
- [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.
The first column will be 15 ems wide, and this is where the navigation panel will appear. And then for the second column I want to take the entire width of the viewport and then just subtract one em so that this first column peaks out a little bit. That should result in a grid that is as wide as the viewport plus 14 ems, so we'll get something that's bigger than what we see. I'll use the calc method for this, I'll say calc, 100%, you could use vw2 if you wanted to, but that would cause problems with the scroll bar, so 100% works fine in this case, minus one em, that gives me two columns.
Then I need to position the navigation panel inside the first column, and I'll do that using grid template areas. So I'll create a new area called nav, set it across all four rows. Then I have to position an item in this new nav area, and we have a rule for that item already, down here, main nav. It's currently positioned for the menu item to appear on top of the other content. I'll take all that stuff out, and instead say, grid, area, nav. Then at the very bottom of my style sheet I also have to account for this wider screen scenario where we used to have two columns.
So here we used to display main content on the left with an auto width, and then the sidebar on the right, with a 15 em width of the column. So I need to add in my 15 em column here for the navigation, and leave the 15 ems in place for the sidebar, and change the middle part here, so that I take the full width, that would be 100%, and then I subtract the one em so that I get the menu to peak out, and 15 ems so I account for the space the sidebar takes up.
That means calc, 100%, minus 16 ems. Down in grid template areas I also have to add in the nav area again, so I'll nav across all three rows. Save that, go back in the browser, and now the nav area appears on the left-hand side then we have the main content, and then if we scroll to the right, you'll see the sidebar. You may be wondering, where is the actual menu, well you have to click on the menu for it to appear right, because technically when we load the page, menu shouldn't be there, it only appears once we interact with it.
So what we're seeing here is the revealed state of the menu. So far, so good.
- Defining a grid
- Grid lines and units
- Automatic and manual grid item placement
- Planning for grid layouts
- Starting your layouts with pen and paper
- Multicolumn layouts
- Full-bleed single column layouts
- Making the grid responsive
- Various card layouts
- Accessible off-screen navigation layouts