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