www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

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 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”) is a work in progress, and as such you’ll find browser support for it pretty weak at the moment. To start using it now, you’ll either need to be using IE11 (though this uses an older version of the spec), Microsoft Edge, Chrome Canary or Firefox Nightly

Perhaps the easiest approach is to turn on Experimental Web Platform features in Chrome: chrome://flags/#enable-experimental-web-platformfeatures.

Experimental Web Platform features in Google Chrome
Click this

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

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

  1. grid area
A 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.

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 five values for each. The values for grid-template-columns  state that “the first column should be 150px wide, the second 20px wide, the third 150px”, and so on across five columns, more or less corresponding to our image of the Finnish flag. The five values for grid-template-rows state something similar. Each one would be auto by default, taking height from the content, but we want to be more precise with our gutters, giving them 20px height, so we need to list all five rows. 

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 what’s happened to items 2, 4, and 7? They’ve fallen into the vertical gutters, because our gutters are perfectly legitimate grid tracks and that’s where grid layout will assume they belong if we’re not more specific. It’s time to add some rules to our items.

Item Rules

The syntax available to us at this point can be quite complex, but we’re going to make things as easy as possible by using what’s actually a shorthand property. We’ll begin with our first item, stating that we want it to begin at grid-column 1 and grid-row 1:

Our item will automatically fill the minimum available space between grid lines. Our second item is a little less obvious. We also want this to start on grid-row 1, but we want it to skip over grid-column 2 and instead start on grid-column 3. Column 2 will be left empty to form our gutter.

We continue like this, skipping over our gutter columns and rows, eventually finishing with our ninth item:

At the end of all that, 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 where each child belongs on the grid by declaring its grid-column and grid-row.

In the next part of this series we’ll take a deeper look at Grid’s syntax, improve the way we define our gutters, 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.