Create a single-column full-bleed layout using CSS Grid.
- [Instructor] CSS Grid provides a clean solution…to the ever-popular full-bleed single column layout.…But the solution is not immediately obvious…for reasons that will become clear right now.…The full-bleed single column layout…features sections and images that span…the full width of the view port, thereof full-bleed,…and the contents within each section…are center-aligned with a max width.…Doing this without CSS Grid requires…a lot of extra container nesting…and can be quite messy on the HTML site.…With CSS Grid the HTML is nice and clean…but we have to think a bit outside the box…to get the layout to work.…
Here's the challenge: technically what we're looking for…in this layout is a four-column grid…where full-bleed content takes up all four columns…and the centered content takes up the two middle columns.…The problem is, we can't use a single global grid to do this…because the grid items would be the individual sections…and we would have no way of aligning…the contents within those sections to the grid.…So, what do we do?…
- 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.