Grid Layout

CSS Grid Layout is a powerful two-dimensional layout system.

Like Flexbox, it consists of two parts: the container and the items.

You define a grid template on the container, then place the items onto the grid.

Defining the container

Given following HTML structure:

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>

Your can define the container's grid template with grid-templates-rows and grid-template-columns, or use grid-template to combine the two rules to be more concise.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

grid-template-columns defines the width of each column. fr stands for fraction, other units like px and em can also be used.

+-----------+------------------+
|1          | 2                |
+-----------+------------------+
|3          |                  |
+-----------+------------------+

Placing the items

You can use grid-column-start, grid-column-end or grid-column to defined the position and size of the item in the grid.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.item1 {
  grid-column-start: 2;
}

+---------+-------------------+
|         |1                  |
+---------+-------------------+
|2        |3                  |
+---------+-------------------+

.item1 {
  grid-column-end: 3;
}

.item1 {
  grid-column-end: span 2;
}

those two does the same thing:

+-----------------------------+
|1                            |
+---------+-------------------+
|2        |3                  |
+---------+-------------------+

Ascii art style grid template

grid-template-areas allows you to defined the template in an ascii art style.

.container {
  grid-template-areas:
    "a a a"
    "b . c";
}

.item1 {
  grid-area: c;
}

.item2 {
  grid-area: b;
}

.item3 {
  grid-area: c;
}

+----------------------------+
|3                           |
+---------+--------+---------+
|2        |        |1        |
+---------+--------+---------+

Alignment

Align columns

justify-content aligns columns horizontaly, similar to justify-content in a horizontal flexbox layout:

.container {
  display: grid;
  grid-template: repeat(2, 100px) / repeat(3, 100px);
  justify-content: space-between;
}

+----+------+----+-------+----+
|1   |      |2   |       |3   |
+----+      +----+       +----+
|4   |      |5   |            |
+----+------+----+------------+

Align rows

align-content aligns rows verticaly, similar to align-content in a mutli-row horizontal flexbox layout:

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  height: 200px;
  align-content: center;
}

+-----------------------------+
+-----+-----+-----+           |
|1    |2    |3    |           |
+-----+-----+-----+           |
|4    |5    |                 |
+-----+-----+                 |
+-----------------------------+

Align inside grid cells

Given a 2x2 grid:

.container {
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(2, 1fr);
}

justify-items and justify-self aligns the content horizontaly, justify-items is applied on the container, justify-self on the children:

.item {
  justify-self: end;
}

+-------+-----+-------+-----+
|       |1    |       |2    |
|     +-+-----+       +-----+
|     |3      |             |
+-----+-------+-------------+

Similarly align-items and align-self align the content verticaly:

.container {
  display: grid;
  grid-template: repeat(2, 100px) / repeat(2, 1fr);
  align-items: end;
}

+---------------------------+
|             +-------------+
+-------------+             +
|1            |2            |
+-------------+-------------+
|                           |
+-------------┐             |
|3            |             |
+-------------+-------------+

Tips to remember thoses rules

There are a total of 6 rules (2 prefixes multiplied by 3 suffixes):

• justify-*: Used to align horizontally(main axis).

• align-*: Used to align vertically(cross axis).

• *-content: Applies to rows or columns.

• *-items: Applies to items within their cells.

• *-self: Applies to a single item within it's cell.

More

Play a game to master grid layout.

There is also a Grid Cheatsheet.