Grid / Flex Box Quiz

Instructions

This exercise will work with CSS flexbox and CSS grids. Flexbox operates in one dimension (x or y), while grid operates in both.

View Rachel Andrew's video on grid layout.

1. Change `section` display to grid and set `grid-template-rows: 1fr;`.
2. Apply media queries for responsiveness.
3. Apply a purple border and padding to all direct children of `section`.
4. Target navigation and use Flexbox.
5. Style grid in a widescreen layout.

Video and Grid Resources

1. Watch Rachel Andrew's grid layout tutorial.
2. Explore her articles on CSS Grid.

Finishing Up

1. Style odd/even list items.
2. Make `#empty` and `#finishing` flex containers.

Flex Box Articles

Read Rachel Andrew's articles:

1. What Happens When You Create A Flexbox Flex Container?
2. Everything You Need To Know About Alignment In Flexbox
3. Flexbox: How Big Is That Flexible Box?
4. Use Cases For Flexbox