A short introduction to CSS Grid: Creating your first grid.

I recently gave a short introduction to CSS Grid at one of our NONA Demo Days. This is the distillation of that talk into an article.

I’ve broken it up into a few concise articles, which will hopefully make it easier to consume.

Without further ado, Part 1: Creating your first grid

Before we start

This talk centred around 2 things — the slide show and a Github repo of code exercises with supplied solutions. We will be running through the slides and corresponding code examples step-by-step in this article.

You can grab both in the Resources section below.

Bits.

The basic grid is made up of the following building blocks:

The container

The grid container is the wrapper that holds all your grid cells and is created in the same way you’d define a Flex or Block element, with display.

CSS:

.container {
  display: grid;
}

HTML:

<div class="container">
  <div>A cell</div>
  <div>Another cell</div>
</div>

The Tracks (Columns and Rows)

The grid’s “track” is the name for the columns and rows of your grid. It’s a helpful concept to keep in mind as the tracks are the building blocks of your grid and define what it actually ends up looking like. Tracks are surrounded by grid lines, which you’ll need for any grid navigation (see point below).

This would create a grid with 5 columns and 3 explicit rows, each with the same width (1fr — ie 1 fraction). The vertical spacing in the row (the 1fr value) will only be applied if the grid has a height value assigned.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

In the example above, should there be more than 15 cells (3 rows x 5 columns) the grid would auto-flow the remaining cells, keeping a 5-column layout, but automatically creating new rows until all the cells have been laid out.

The Cell

The grid cell, very much like the table cell, is the element that holds whatever data you might want to display.

The Lines

Gridlines wrap your columns and rows and are implicitly numbered, starting at the top or left of your grid, there is a line between each track, and finally ending with the last one at the far right/bottom of your grid. The number of horizontal or vertical grid lines will always be n+1 of the total number of columns or rows respectively. To illustrate further, given a grid with 4 columns and 8 rows, your grid would have 5 horizontal grid lines and 9 vertical ones. The first-and-last grid line will be aligned to the outer border of the grid, but all lines between the tracks are centred between the cells.

The Gap

The gap is the space or padding between 2 tracks. It is entirely optional and can be defined as a single value across the grid, or separately for the horizontal and vertical axis.

How it works:

The grid container contains all the grid’s cells. Tracks are your rows and columns, but unlike all grid predecessors, the CSS Grid does not need any HTML scaffolding to define grids or columns and they are defined purely in the CSS. Essentially, CSS Grid renders all children inside the container as cells, based on the columns and rows defined in the CSS.

Diving right in — let’s fire up your first grid!

Reference: Basic Grid Example on Github

In the code below, we’re creating a 5 column grid, with a gap of 1rem, and no defined rows — so all rows will be created automatically by the grid, based on the number of cells we have defined. In this example, we have 10 cells, so 2 rows will be created by the grid.

Basic CSS Grid example on CodePen

Resources:

Giving it a go: Clone or download the repo and try out the exercises yourself.

I’ve set the Github up as a bunch of challenges to test different aspects of laying things out with the grid. Each test has a “-EXERCISE” and “-COMPLETE” postfix. Use the -EXERCISE to play and figure out what’s what, and the -COMPLETE to test your progress, or for a little bit of help.

Nona-Creative/getting-started-with-css-grid

You can grab the slides here:

Getting started with CSS Grid — an introduction to the grid by me.

What’s Next? Tracks and Flow

By now you should have a pretty decent grasp of how to create a grid. Next up, we’ll be running through creating tracks (slides 7 & 8) and dealing with flow (slides 9 & 10).