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">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.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!