CSS Grid

  • CSS Grid is an advanced 2-Dimensional layout system
  • Can layout entire websites or small components of websites
  • Describes fixed and flexible track areas
  • Allows for precise item placement within areas
  • Provides for alignment of items
  • Supports separate and overlapping items

Grid Layout Codepen

See the Pen CSS Grid Layout - Template Areas by Joshua Burke (@Dangeranger) on CodePen.

Basic Grid Example

<div class="wrapper">
.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;

Basic Grid Codepen

See the Pen Basic Grid Example by Joshua Burke (@Dangeranger) on CodePen.

Let's play a game!

Let's practice some more grid setup! Grid Garden Is a fantastic game by the same people who brought you Flexbox Froggy that lets you practice using grid properties. Go there now, and see if you can complete all 28 levels!