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.

Mozilla Grid Tutorial

• Complete the following walkthough to create your first CSS Grid site

Mozilla CSS Grid Tutorial

 Previous Lesson Next Lesson 

Outline