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!

 Previous Next 

Outline