Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

CSS: Advanced Layouts with Grid

via LinkedIn Learning


Learn how to take full advantage of the capabilities of CSS Grid to build interfaces that are attractive, accessible, and responsive.


  • Welcome
  • Using the exercise files
  • Prerequisites
1. CSS Grid: Core Principles
  • Terminology
  • Define a grid
  • Grid lines and units
  • Automatic grid item placement
  • Manual grid item placement
  • Named lines
  • Grid areas
  • Grid gap
2. Planning for Grid Layouts
  • CSS Grid means rethinking web layouts
  • Start your layouts with pen and paper
  • A new approach to backward compatibility
  • Accessibility first
3. Multi-Column Layout
  • The challenge
  • Overview of the starting point
  • Check for grid support
  • Create the main grid
  • Position items on the grid
  • Add a third column for wider viewports
  • Breaking the grid
  • Justify the grid inside the grid container
  • Use white space to perform magic
4. Full-Bleed Single Column Layout
  • The challenge
  • Overview of the starting point
  • Check for grid support
  • Create the shared grid
  • Create columns and position grid items
  • Make the grid responsive
5. Various Card Layouts
  • The challenge
  • Overview of text-based card markup
  • Create a grid for each card
  • Position items on the grid
  • Place the cards on a grid
  • Overview of image-based card markup
  • Using the grid to stack grid items
  • Change the appearance of cards with flex
  • Create different-sized grid items
  • Create a complex magazine-style grid
6. Accessible Off-Screen Navigation Layouts
  • Different off-screen navigation options
  • Off-screen to cover navigation overview
  • Set up the main grid
  • Position the navigation area on the grid
  • Hide the navigation area off canvas
  • Create a reveal effect using JavaScript
  • Improve accessibility of off-screen navigation
  • Overview of sliding navigation panel
  • Create an overflowing grid
  • Slide content in and out of the canvas
  • Bonus: Animate the sliding effect
7. Bonus Chapter: Ask the Instructor
  • What are responsive images?
  • Now that we have CSS Grid, do I still need to learn Flexbox?
  • What are CSS custom properties (variables)?
  • How does the calc() function work?
  • How does HSL work?
Thank You
  • Conclusion

Taught by

Morten Rand-Hendriksen


4.7 rating at LinkedIn Learning based on 173 ratings

Start your review of CSS: Advanced Layouts with Grid

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.