Position elements within each of the grids for a consistent layout.
- [Instructor] Now comes the challenging part.…My design calls for a four-column layout…where the two center columns…are the ones that constrain the content…to a max width of 50em's,…and the two outer columns, so the first and the last column,…work much the same as margin left and right auto…in that they flex the available space…on an off to center line everything else.…To make matters a bit more complicated,…at the very bottom we have these two twin boxes…that span across two columns each…and we do the same for footer.…
To get this to work, we'll use a combination…of the FR units, the repeat keyword,…and the min-max function.…This is what it looks like.…First, grid-template-columns,…then we'll set the first and the last column…to one FR each so they'll take up…one fraction of the available space, so 1fr.…Then I'll repeat the two center columns.…So I got two identical columns, repeat(2,)…And then I'll use the min-max function…to set a max width for each of these two columns.…
Now, the max width of the content should be 50em's.…
- 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.