CSS: Advanced Layouts with Grid
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.
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
- Terminology
- Define a grid
- Grid lines and units
- Automatic grid item placement
- Manual grid item placement
- Named lines
- Grid areas
- Grid gap
- CSS Grid means rethinking web layouts
- Start your layouts with pen and paper
- A new approach to backward compatibility
- Accessibility first
- 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
- 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
- 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
- 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
- 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?
- Conclusion
Taught by
Morten Rand-Hendriksen
Never Stop Learning!
