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. 

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: 

1. grid lines
2. columns
3. rows
4. 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.

1. gutters

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

1. grid area

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.

1

<section class="grid-1">

2

  <div class="item-1">1</div>

3

  <div class="item-2">2</div>

4

  <div class="item-3">3</div>

5

  <div class="item-4">4</div>

6

  <div class="item-5">5</div>

7

  <div class="item-6">6</div>

8

  <div class="item-7">7</div>

9

  <div class="item-8">8</div>

10

  <div class="item-9">9</div>

11

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

1

.grid-1 {

2

  display: grid;

3

  grid-template-columns: 150px 150px 150px;

4

  grid-template-rows: auto auto auto;

5

}

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.

1

.grid-1 {

2

  display: grid;

3

  grid-template-columns: 150px 150px 150px;

4

  grid-template-rows: auto auto auto;

5

  grid-gap: 20px;

6

}

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:

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 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!

• 

  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 CSS Grid Layout Resources

• 

  A Quick Introduction to CSS Grid Layout

  For a long time, web designers have been used to creating layouts with CSS by using floats. Floats, however, were never meant to be used to create grid...
• 

  Beyond the Basics: CSS Grid Layout

  CSS Grid Layout is a fantastic tool for creating layouts with CSS. In this short course, you’ll learn the more advanced functionality of CSS Grid including...

• @rachelandrew follow Rachel Andrew and you’re pretty much set.
• There’s a solid reference over on CSS Tricks too.