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.

Mozilla Grid Tutorial

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

Mozilla CSS Grid Tutorial