Grid / Flex Box Quiz

Instructions

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

View Rachel Andrew's video to see how to develop a layout from scratch.

Setting up the Grid

1. Change display to grid to turn children into grid items.
2. Use grid-template-columns: 1fr 1fr 1fr; for wide screens.
3. Use grid-column: 1 / span 3; for header and footer.

Video and Grid Resources

1. Build a responsive website in under an hour.
2. Read about Grid Containers at Smashing Magazine.

Finishing Up

1. Target odd items with azure and even with lightyellow.

Flex Box Articles

1. Flex Container Basics
2. Use Cases for Flexbox