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 quick start CSS grid tutorial will skip the details and nuances, instead helping you get stuck in, right now.

CSS Grid Layout and Your Browser

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

httpscaniusecomfeatcss-grid — caniuse.com

Setting up a Grid Layout

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

Terminology

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:

grid lines
columns
rows
cells

A basic grid highlighting grid lines columns rows and cells — A basic grid, highlighting grid lines, columns, rows, and cells

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.

gutters

The same grid, but this time bearing a striking resemblance to the Finnish flag

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

grid area

One of the many possible grid areas on our demo grid

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.

CSS Grid Markup

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

1	<section class="grid-1">
2
3	</section>

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>
</section>

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

CSS Grid Rules

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

1	.grid-1 {
2	display: grid;
3	}

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:

Conclusion

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

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

In the next CSS grid tutorial 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!