Set up the main grid for off-screen navigation.
- [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 them in turn.…First, masthead.…
- 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
Skill Level Advanced
Building Responsive Forms with Flexboxwith James Williamson1h 19m Intermediate
1. CSS Grid: Core Principles
2. Planning for Grid Layouts
Accessibility first1m 54s
3. Multi-Column Layout
4. Full-Bleed Single Column Layout
5. Various Card Layouts
6. Accessible Off-Screen Navigation Layouts
7. Bonus Chapter: Ask the Instructor
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.