Skip to content
WANCODE
BM

CSS Grid Fundamentals

15 minBeginnerHTML · CSS · JS

In this lesson

  • Create a grid with display: grid and grid-template-columns
  • Share space fairly with the fr unit and repeat()
  • Space rows and columns with gap
  • Make an item span several columns with grid-column

The big idea

Flexbox lines things up in one direction. Grid lays things out in rows and columns at the same time — perfect for galleries, card lists and page layouts.

Think of a grid like the lines in an exercise book. You draw the columns on the parent, and the children drop into the cells one by one, left to right, then onto the next row.

CSS
.cards {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* three columns */
  gap: 16px;                                /* space between cells */
}

You never said how many rows there are. Grid creates as many as it needs: six cards in three columns makes two rows automatically.

Change the columns and gap and watch the items flow into the cells.

The fr unit: fair shares

Fixed pixel columns don't fit every screen. The fr unit means a fraction of the free space. 1fr 1fr 1fr gives three equal columns that stretch with the page. 2fr 1fr makes the first column twice as wide as the second.

Repeating yourself

CSS
grid-template-columns: 1fr 1fr 1fr 1fr;

Same thing with repeat()

CSS
grid-template-columns: repeat(4, 1fr);

repeat(count, size) is just a shortcut. Both lines make four equal columns.

Placing items

By default every item takes one cell. To make one item bigger, tell it how many columns to span:

CSS
.featured {
  grid-column: span 2;   /* take up two columns */
}

.banner {
  grid-column: 1 / -1;   /* from the first line to the last: full width */
}

Lines, not cells

Grid numbers the lines between columns, starting at 1. Three columns have four lines, so 1 / 4 and 1 / -1 both mean "from the very left to the very right". -1 always means the last line.

Grid or flexbox?

Use flexbox for a single row or column of things (a nav bar, a row of buttons). Use grid when you care about rows and columns lining up (a gallery, a dashboard, a whole page). Real sites use both, often nested.

The kuih cards are stacked in one long column. Turn .cards into a grid with three equal columns that stretch with the page — use the fr unit (with or without repeat()).

Checks

  • .cards is a grid container
  • The grid has three equal columns
  • Cards sit side by side and wrap onto a new row

Check understanding

Q1

A grid is 300px wide with no gap and grid-template-columns: 1fr 2fr. How wide are the columns?

Q2

Which is the same as repeat(4, 1fr)?

Q3

What does grid-column: 1 / -1 do to an item?

What you learned

  • display: grid + grid-template-columns on the parent creates columns; rows are made automatically.
  • fr shares the free space; repeat(3, 1fr) gives three equal columns.
  • gap spaces rows and columns without any margins.
  • grid-column: span 2 makes an item cover two columns; 1 / -1 makes it full width.
Preview

Console output from your code appears here.

Step 1 of 3