CSS Grid Layout

Intro

Just like Flexbox revolutionized layout in one dimension, CSS Grid makes major strides in 2 dimensional layout. If you can express your layout with columns and rows, you can make it with CSS Grid. It allows you to create specific ‘tracks’ for columns and rows which your content aligns itself to. You can also specifically specify how many columns and rows you want your content to use. Finally, you can declare specific ‘grid areas’ and assign elements to those areas for very fine-grained control of your layout

Suggested Learning

• Learn CSS Grid
• CSS Grid Garden - A game to practice CSS Grid
• Examples:
  • Grid Layout Demo
  • Grid Poster
  • Hexagon Grid
  • Demo Layouts

Requirements

• Fork the following Codepen: CSS Grid Layout Assignment
• Follow the instructions in the pen to create a unique CSS Grid Layout
• Show your work to the #requirements Discord channel to show you have passed this requirement off.

Extra Learning

• The Complete Guide
• Grid By Example - A bunch of additional learning resources.
• CSS Grid Practice
• More Explanation

This list is by no means complete. Feel free to add an issue or put in a pull request to update it.