Grid / Flex Box Quiz

Instructions

This exersize will work with CSS flexbox and CSS grids. There are similarities between the two. Flexbox has one dimension in either direction, x or y axis, and grid does both x and y axis.

View Rachel Andrew video as she creates a layout, to get an overall idea of how to develop a layout using grids to do a layout from scratch. She copies a BBC page that is more complicated than what you will run into but following her is rewarding. Watch the first 45 minutes.

Setting up the grid.

  1. Changing the display of an element from block to grid is all it takes to turn the direct children of the element into grid items.
  2. Target section and turn display to grid, add grid-template-rows at 1fr and give the section padding: 0 10px.
  3. Assuming that the grid takes up most if not all of the page, it will need to be responsive to gracefully end up with one column for a smartphone and more for larger screens.
  4. Create a media query that puts the smartphone in the default position and the larger screen in the media query box using @media all and (min-width: 600px) {}
  5. Set up the page for viewing on smartphones.

Video and Grid Resources

Rachel Andrew layout from scratch
  1. Watch the first 45 minutes of Rachel Andrew as she works her way through a layout from scratch.
  2. Didn’t get enough? See Rachel Andrew go through another demonstration? Build a responsive website in under an hour.

Finishing Up

  1. Target every odd list item in the articles with background color azure. :nth-child(odd). Color the even ones lightyellow.
  2. Target ids empty and finishing, set to flex and color background azure.