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

Provider Logo

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.

CSS layouts are becoming less of a puzzle. After decades of hacking CSS to make multicolumn layouts, the CSS Grid Layout module makes page layout predictable. In this course, take a step back from traditional layout models, and learn how to take full advantage of the new capabilities of CSS Grid to build interfaces that are attractive, accessible, and responsive. Join Morten Rand-Hendriksen as he walks through how to create full-bleed layouts, multicolumn layouts, and advanced card-based layouts. He demonstrates how to create dynamic responsive grids that adjust to their available viewport space.

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

Related Courses

Reviews

0.0 rating, based on 0 reviews

Start your review of CSS: Advanced Layouts with Grid

Never stop learning Never Stop Learning!

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

Sign up for free