Lesson 05 - CSS Grid

Expanding on the new layout tools of CSS, we're going to venture into CSS Grid today.

Agenda

• Flexbox overview
• Basics of CSS Grid
• Explore CSS grid properties
• Figure out how to use fr units
• Build some grid layouts, some with flexbox, some with grid and compare

Objectives

By the end of this class, you will:

• Know how to use CSS Grid
• Have a grasp of the Grid-related CSS properties
• Know when to use Flexbox and when to use CSS Grid
• Used css grid in a very real world situation

Materials

• Slide deck in Keynote or PDF
• If you liked Flexbox Froggy, you'll love CSS Grid Garden (same group put them out Codepip) - CSS Grid Garden
• CSS-Tricks Grid reference, kinda overwhelming but comprehensive CSS-tricks