Grid-template-columns

Learn the column structure with grid-template-columns.

Draw the column structure

The grid-template-columns declaration lists column widths in order. Each value is space-separated; as many values as you write, that many columns appear. grid-template-columns: 200px 200px gives two fixed columns; 1fr 1fr 1fr gives three equal ones.

These columns are called grid tracks. A track is the space between two grid lines. Column tracks run horizontally, row tracks run vertically.

The fr unit

fr (fraction) is a flexible unit unique to grid. It divides the remaining free space in the container according to the fr values you write. 1fr 2fr means the second column is twice as wide as the first.

You can mix it with fixed px or % values. 200px 1fr keeps the first column at 200 pixels; the second takes whatever is left. That makes a sidebar + content layout easy.

Exercise Three equal columns for cards

The .cards selector already contains display: grid. Add grid-template-columns: 1fr 1fr 1fr so three equal columns appear.

Show example solution

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

Test yourself

Which one creates three equal columns?
```
.cards {
  display: grid;
  grid-template-columns: ?
}
```
- grid-template-columns: 3fr
- grid-template-columns: 1fr 1fr 1fr
- grid-template-columns: 3cols
- grid-columns: 3
Show answer

grid-template-columns: 1fr 1fr 1fr — Correct. 1fr 1fr 1fr gives three equal columns; each takes one third of the remaining space.

Two columns, second twice as wide

.layout {
  display: grid;
  grid-template-columns: ____;
}

Show answer

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

Match each column value to its meaning

1fr 1fr 1fr

Three equal columns
200px 1fr

Fixed + flexible
1fr 2fr

Two ratio columns
50%

One percent column

Next lesson: Grid-template-rows

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies