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

Overview

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

Syllabus

Introduction
  • 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

Reviews

4.8 rating at LinkedIn Learning based on 298 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.

Someone learning on their laptop while sitting on the floor.