CSS Grid

In CSS land there are multiple ways of positioning elements. The most common methods are absolute positioning position: absolute;, Flexbox display: flex; and CSS grid display: grid;.

This article describes how to create a layout with CSS Grid.

Video

You can follow the video and read the steps below the video.

Parent and children

CSS grid places its direct children onto a "grid". In the following HTML snippet the parent element has the class 'grid-container' and 6 children.

<div class="grid-container">
  <div>Grid item 1</div>
  <div>Grid item 2</div>
  <div>Grid item 3</div>
  <div>Grid item 4</div>
  <div>Grid item 5</div>
  <div>Grid item 6</div>
</div>

We first have to set the parent element to be displayed as a grid via the CSS property display.

<style>
.grid-container {
  display: grid;
}
</style>

Columns and rows

We also have to create columns and or rows. The CSS properties grid-template-columns and grid-template-rows are used to create columns and rows.

<style>
.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
</style>

You can set the amount of columns by adding or removing values:

• grid-template-columns: 200px 200px; will create two columns of each 200 pixels width.
• grid-template-columns: 200px 200px 200px; will create 3 columns of each 200 pixels width
• grid-template-columns: 300px 500px 500px; will create 3 columns, the first and last 200 pixels wide. The middle column 500 pixels wide.

The following snippet combines columns and rows to create a grid.

<div class="grid-container">
  <div>Grid item 1</div>
  <div>Grid item 2</div>
  <div>Grid item 3</div>
  <div>Grid item 4</div>
  <div>Grid item 5</div>
  <div>Grid item 6</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
</style>

Fractions

Instead of pixels you can also use fr which stands for fraction (for example 1/2 or 1/4). This is super handy to create fluid grids.

In the following snippet we set grid-template-columns: 1fr 1fr 1fr 1fr;. Which means each column will be around 25% (1/4).

We also add grid-column-gap: 10px; which sets the gutter to 10 pixels.

<div class="grid-container">
  <div>Grid item 1</div>
  <div>Grid item 2</div>
  <div>Grid item 3</div>
  <div>Grid item 4</div>
  <div>Grid item 5</div>
  <div>Grid item 6</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 300px 300px;
  grid-column-gap: 10px;
}
</style>

Dev tool tip

In Firefox developer tools you can show the CSS grid by clicking on the grid icon.

Resources

• CSS Grid course by Wes Bos is full-on in depth course on CSS Grid
• MDN Web Docs has a good introduction to CSS Grid
• CSS Grid Garden is a fun CSS grid game
• CSS Tricks has a good reference article on CSS Grid