CSS Grid Layout: Introduction

A few concepts are introduced with CSS Grid, and it’s a good idea to get familiar with the vocabulary:

• Grid line: items are positioned on the grid with the lines where the item starts and ends, so grid lines are central to how CSS Grid works. Column grid lines are numbered from left to right starting with 1 and row grid lines are numbered from top to bottom starting with 1.

A little bit like with flexbox, the grid is organized with a container element and children elements that become grid items. You simply set display: grid on the container element. The grid rows and columns are defined with grid-template-columns and grid-template-rows.

Let’s start with the following markup:

<div class="container">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
  <div class="box box-5">Box 5</div>
  <div class="box box-6">Box 6</div>
  <div class="box box-7">Box 7</div>
</div>

Here’s how we can define the CSS for the container:

.container {
  display: grid;

  grid-template-columns: 150px 150px 80px;
  grid-template-rows: 100px auto;

  grid-gap: 10px 15px;
}

With this we already get something interesting, even without setting any properties on the grid items:

Notice how we added 10px horizontal gaps and 15px vertical gaps between the cells using grid-gap.

Now we can go further by defining the start and end lines of specific items. Items that are not explicitly placed on the grid will be placed according to an algorithm. We use grid-column-start, grid-column-end, grid-row-start and grid-row-end to define where an item starts and ends on the grid:

.box-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.box-3 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

Or we can use the grid-column and grid-row shorthands for the same result:

.box-1 {
  grid-column: 1 / 3;
}

.box-3 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

Here’s the resulting grid now:

👉 Gaps don’t add new grid lines, so items that are next to each other are really touching the same line, even if a gap is separating them.

Unfortunately Grid Layout is still not available at large. Here’s the current availability:

• Supported by default in Firefox since version 52.
• Fully supported in the latest Chrome and Opera behind a flag.
• Supported in IE and Edge, but with an older syntax.
• Available in the latest Safari Technology Preview.

Chrome should be shipping a version with Grid enabled by default in March 2017. So it’s coming really soon, and 2017 will most likely be the year of CSS Grid!

We kept this post short and sweet, but there are many new concepts to learn with CSS Grid, so we split many of them into their own post:

• The Fr Unit
• Named Lines
• The Span Keyword
• The Minmax Function
• The Repeat Notation
• Holy Grail Layout Example
• grid-auto-rows + grid-auto-columns

Here are a few great resources to learn the ins and outs of CSS Grid:

• CSS-Tricks’ A Complete Guide to Grid
• Grid by Example by Rachel Andrew
• This eBook by Eric A. Meyer
• These layout demos by Jen Simmons