CSS grid lines are given numbers when they are created. You can also give them names so they are more meaningful to refer to.
- Using the gridline numbers to place items on the grid,…works fine but it's a really abstract way…of approaching layouts, if you think about it.…When you look at this layout,…you're not thinking line one, line two,…line three and line four.…You're probably thinking something like,…this is the main area, and then over here…we have a side bar area…and then there's a footer area on the bottom.…And you want to use that kind of terminology…when you create your CSS.…Good news is, you can.…There are two different approaches to this,…we will cover those in this movie and the next one.…
The first approach is to name the lines…and there are several things you can do here,…so let me explain how this works.…You'll remember from when we declared the grid itself…up here in the site rule, we said grid template columns…and then defined the space between each of the lines,…so if you imagine, you can see there's a line here,…in front of two fr and there's a line after two fr,…there's a line after the 1 fr and then…there's a line at the end here.…
- 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.