Lessons > 8. Creating Page Layouts w/CSS: Grid

Slides

• Working with CSS Grid

Lecture Video(s)

• Recorded Lecture Video (49:28)

Readings

1. CSS Grid. CS 130 Course Website
2. Media Queries. CS 130 Course Website
3. Learn CSS Grid by Building 5 Layouts in 17 minutes.

Optional Readings

• CSS Tricks: A Complete Guide to Grid.
• CSS Grid Garden.

Today we will be reviewing CSS Grid in order to instantiate some common layouts. Please complete the readings before coming to class. We will be reviewing the “Learn CSS Grid by Building 5 Layouts in 17 minutes” video / exercises in class:

CSS Grid Exercises

In class, you will try to build the following layouts:

Task 1: Pancake Stack

Task 2: Simple 12-Column Grid Layout

Task 3: Responsive Layout Using Grid Template Areas

Attribution Information: This activity was taken from Free Code Camp’s Resources: https://www.freecodecamp.org/news/learn-css-grid-by-building-5-layouts/