CSS Grid Layout: Introduction

Flexbox is great, but its main purpose is to help us with positioning elements in one dimension, either horizontal or vertical. For whole page, two-dimension layout, we’ve been mostly relying on frameworks like Bootstrap or Foundation to provide us with classes that we can use to create a grid layout. A new module, CSS Grid Layout, set to be available in browsers very soon, should change all of that.

Let’s explore CSS Grid with a very brief overview. First, a few key points to keep in mind:

• Like with Flexbox, source order doesn’t matter with CSS Grid and items can easily be repositioned depending on the size of the viewport.
• You can start using grid layout now and use feature detection with @supports so that it’s only applied in supporting browsers.
• Some layouts that are impossible to accomplish even with the grid system of modern CSS frameworks will be possible with CSS Grid.

Vocabulary

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.

Grid Row Line 2

• Grid track: The space between two grid lines.

Grid track

• Grid area: An area defined by any 4 grid lines.

Grid area

• Grid cell: The space between two consecutive column and row grid lines. The smallest unit possible on a grid.

Grid cell

Display: grid on the parent

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.

CSS Grid Layout today

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!

Enable in Chrome

To enable CSS Grid in Chrome, go to chrome://flags/, look for Experimental Web Platform features and enable it.

Enable in Firefox

Grid layout is now supported out of the box with Firefox 52 and up.

Learning More

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

Further reading

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