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.

In Chrome developer tools you can click the grid icon next to the HTML element.

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