CSS Grid Layout: A Quick Start Guide

How we approach layout on the web is changing, and at the forefront of that change is CSS Grid Layout. This updated quick start guide will skip the details and nuances, instead helping you get stuck in, right now.

CSS Grid Layout: A Quick Start Guide

Your Browser

CSS Grid Layout (known to its friends as “Grid”) has come on leaps and bounds in the last year, and as such you’ll find browser support for it pretty solid nowadays.

CSS Grid Layout: A Quick Start Guide

Setting up a Grid

Grid allows us to arrange elements on a page, according to regions created by guides.


At their simplest these guides, or grid lines, frame horizontal and vertical grid tracks. Grid tracks serve as rows and columns, with gutters running between them. Where horizontal and vertical grid tracks intersect, we’re left with cells, much like we use with tables. These are all important terms to understand.

In the image below you’ll see a demo grid, showing:

  1. grid lines
  2. columns
  3. rows
  4. cells

CSS Grid Layout: A Quick Start Guide

For a graphic layout, it might look more familiar if we use exactly the same grid, but part some tracks to give us gutters between content areas.

  1. gutters

CSS Grid Layout: A Quick Start Guide

There’s one last term we need to clarify before moving on:

  1. grid area

CSS Grid Layout: A Quick Start Guide

A grid area is any part of our grid fenced in by four grid lines; it can comprise any number of grid cells.

Time to build this grid in the browser! Let’s begin with some markup.

Grid Markup

To recreate the grid above, we need a container element; anything you like:

<section class="grid-1">


In it we’re going to place nine child elements.

<section class="grid-1">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
  <div class="item-7">7</div>
  <div class="item-8">8</div>
  <div class="item-9">9</div>

Fork this starter pen if you want to follow along. I’ve added some basic styles to visually differentiate each grid item.

Grid Rules

Firstly we need to declare that our container element is a grid using a new value for the display property:

.grid-1 {
  display: grid;

Right, that was easy. Next we need to define our grid, by stating how many grid tracks it will have, both horizontally and vertically. We do that with the grid-template-columns  and grid-template-rows properties:

.grid-1 {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: auto auto auto;

You’ll notice three values for each. The values for grid-template-columns  state that “all three columns should be 150px wide”. The three values for grid-template-rows state something similar. Each one would actually be auto by default, taking height from the content, but we’ve stated them here in order to clearly visualise what’s going on.

So what do we have now?

Each of our items has been automatically assigned a grid area in chronological order. It’s not bad, but we’re missing gutters. Time to fix that.

Mind the Gap

Grid comes with a purpose-made solution for declaring gutter measurements. We can use grid-column-gap and grid-row-gap, or the shorthand grid-gap property.

Let’s add a fixed gutter of 20px to our .grid-1 element.

.grid-1 {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: auto auto auto;
  grid-gap: 20px;

And now, we’re left with a nice, neat grid:


That’s it, you’re up and running with Grid! Let’s recap the four essential steps:

  1. Create a container element, and declare it display: grid;.
  2. Use that same container to define the grid tracks using the grid-template-columns  and grid-template-rows properties.
  3. Place child elements within the container.
  4. Specify the gutter sizes using the grid-gap properties.

In the next part of this series we’ll take a deeper look at Grid’s syntax, explore flexible layouts, the fr unit, the repeat() function, and take our simple grid much further. See you there!

  • CSS Grid Layout: A Quick Start Guide

    CSS Grid Layout: Fluid Columns and Better Gutters


    In this tutorial we’re going to take the grid from our previous tutorial and use it as a playground to look further into Grid. We’ll improve the way we…

Useful Grid Resources

  • @rachelandrew follow Rachel Andrew and you’re pretty much set.