Create a meta-grid to organize the cards.
- [Instructor] So far on this chapter, we've been…working at component level, treating each…card as its own grid and then placing the items…inside the card on that grid for the layouts we want.…Now we can take a step back and treat each of the…cards as a grid item and place them on a larger…grid to grid full card layouts for wider view ports.…The first step in this process is figuring out which…container will be the grid container.…I'm looking at the HTML, you can see each of the…cards is a list item inside an unordered list.…So, the grid container needs to be this…unordered list with a class cards.…
Here I need to introduce a media query because…we only want to introduce this more advanced…grid when the view port is wide enough.…So, I'll start out by setting up a standard media card.…I'll set a min width of 50 m's, maybe,…because I'm working on a small screen.…Then I'll target cards and set up display grid…and create two equal width columns.…
Save this, go back into browser and…here we have a two column grid…
- 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.