Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

CSS Grid Layout: A Quick Start Guide

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Fluid Columns and Better Gutters

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.

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. 

httpscaniusecomfeatcss-grid
caniuse.com

Setting up a Grid

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

  1. gutters


The same grid but this time bearing a striking resemblance to the Finnish flag
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:

  1. grid area
One of the many possible grid areas on our demo grid
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.

Grid Markup

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

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

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:

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:

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.

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

Useful Grid Resources

  • @rachelandrew follow Rachel Andrew and you’re pretty much set.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.