Loading...
Lesson 08: CSS - Responsive Grid
Goal
Learn how to make the grid adapt to the viewport.
Recap
History of grids
Grid design
Why grids improve designs
Learn about
fr
(fractional)
units
equally sized units of available space
Lesson
What is a
viewport
What is
mobile first design
What is a
media query
Activities
Change grid to single column
change columns to
auto
instructions and ingredients should take up 2 columns
Add media query
Example
Resources
CSS grid complete guide
Learn CSS grids
CSS grids game
Please turn on JavaScript to use Paper in all of its awesomeness. ^_^
Goal
Recap
Lesson
Activities
Resources