CSS: Advanced Layouts with Grid

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

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