Lesson 6 of 8

Grid

Flexbox is great for lining things up in one direction, a row or a column. Grid is made for two directions at once: rows and columns together, like a table or a photo gallery. Many layouts use both, Grid for the big structure and Flexbox for the small parts inside.

Turning on Grid

Just like Flexbox, Grid goes on the parent:

css

.gallery {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 16px;
}

grid-template-columns defines the columns. Here there are three, each 200 pixels wide. The children of .gallery fill the cells automatically, left to right and top to bottom. When a row is full, the next child starts a new row. You don't have to define the rows at all.

gap works exactly like in Flexbox, adding space between the cells.

The fr unit

Fixed pixel widths don't adapt to the screen, so Grid has its own unit: fr, short for fraction. It means "a share of the available space":

css

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

Three equal columns that together fill the whole width. You can also mix sizes:

css

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

The first column gets two shares and the second gets one, so the first is twice as wide. That's a classic main content plus sidebar layout in one line.

Quick check

With grid-template-columns: 1fr 3fr, how much of the width does the second column get?

Select one answer

repeat() saves typing

Writing 1fr over and over gets tedious, so there's a shortcut:

css

.gallery {
  grid-template-columns: repeat(4, 1fr);
}

That's the same as writing 1fr 1fr 1fr 1fr.

A gallery that fits any screen

Here's one of the most useful lines of CSS you'll ever learn:

css

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

It looks complicated, so let's read it from the inside out:

minmax(250px, 1fr) means each column is at least 250 pixels wide, and at most one share of the space
auto-fit means "fit as many of those columns as there's room for"

On a wide screen you might get four columns. On a laptop, three. On a phone, one. The cards rearrange themselves without a single extra line of CSS. You'll use this pattern for projects, products, blog posts and anything else that comes in cards.

Quick check

What happens to repeat(auto-fit, minmax(250px, 1fr)) on a narrow phone screen?

Select one answer

Making an item span several columns

Sometimes one item should be bigger than the others, like a featured card. Use grid-column on the item itself:

css

.featured {
  grid-column: span 2;
}

The featured item now takes up two columns and the others flow around it.

Grid or Flexbox?

A simple rule of thumb:

Things in one line, like a menu, a row of buttons or tags: use Flexbox
Things in rows and columns, like cards, a gallery or the overall page layout: use Grid

There's a lot of overlap, and you'll find both can often do the job. Pick whichever feels simpler for what you're building. And just like Flexbox, there's a game for it: Grid Garden (cssgridgarden.com), where you water a garden with Grid CSS.

Quick check

You're building a page of photo cards in rows and columns. What fits best?

Select one answer

Try it yourself

Add a grid of cards to your website:

Add a new section called "Things I like", with three to six small cards inside. Each card can be a div with the class card, containing a heading and a sentence. Ideas: favorite books, places, games or hobbies
Make the section's container a grid with repeat(auto-fit, minmax(220px, 1fr)) and a gap
Style the .card class with padding, a background color, a border radius and maybe a subtle border
Make your browser window narrower and wider and watch the cards rearrange

Then try a few levels of Grid Garden.