CSS: Advanced Layouts with Grid

Course details

The course provides a brief overview of what the CSS grid layout module is and provides some context for using it alongside (or instead of) more traditional layout methods. It additionally provides working examples of five common grid patterns used for modern web layouts. Instructor Carrie Dils covers CSS grid core concepts, shows how to use CSS grid to achieve a desired layout, provides practical examples of using CSS grid, and illustrates responsive layouts with CSS grid.

Learning objectives
Define the CSS grid, along with its terminology and features.
Use browser tools to assist with building grid layouts.
Build some common grid patterns both for general website layout and individual component layout.

Concepts

0. Introduction

01 - Welcome to CSS Grid
02 - What you should know
03 - Using GitHub Codespaces with this course

1. CSS Grid - Core Concepts

04 - What is CSS Grid
05 - Grid terminology
06 - Create a grid
07 - Grid lines and units
08 - Placing grid items
09 - Grid areas
10 - Named grid lines
11 - Grid gap
12 - Grid alignment

2. Planning for Grid Layouts

13 - When to use Grid
14 - Drawing layouts with pen and paper
15 - Using Grid generators
16 - Mobile-first approach
17 - Accessibility considerations

3. Multi-Column Layout

18 - What you're creating - A multi-column layout
19 - Overview of the starting point
20 - Create the main grid
21 - Manual grid item placement
22 - Add third column for wider viewports
23 - Justify the grid
24 - Bonus - Refactor using grid areas

4. Full-Bleed Layout

25 - What you're creating - A full-bleed layout
26 - Overview of the starting point
27 - Create the shared grid
28 - Define columns and position grid items

5. A Very Uniform Card Layout

29 - What you're creating - A uniform card layout
30 - Overview of card markup and starter styles
31 - Define the main grid
32 - Create grid for each card

6. A Variable Card Layout

33 - What you're creating - A variable card layout
34 - Overview of card markup
35 - Define the main grid
36 - Place cards on the grid
37 - Create grid for each card
38 - Position items within the card grid
39 - Make sure it's responsive

7. Asymmetrical or Broken Layout

40 - What you're creating - An asymmetrical layout
41 - Overview of the starting point
42 - Define the primary grid layout
43 - Create the first nested grid
44 - Create the second nested grid

Conclusion

45 - Next steps