CSS Grid

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!

 Previous Next