Summary - Card grid

Build a responsive card grid with flexbox.

Summary — Card grid

In this group you learned how flex items grow, shrink and order themselves, how to align a single item, and how to space items apart. Now we will combine these into a responsive card grid.

The grid should: let cards grow equally, never shrink, start at 200 pixels wide, and keep 1 rem of space between them when they wrap.

Which properties will we use?

First we will make the .cards container a flex container and turn on wrapping with flex-wrap: wrap. We will add gap: 1rem between cards so they stay tidy even when they wrap.

For each card we will write flex: 1 0 200px. This makes the card share free space proportionally, never shrink, and start at 200 pixels.

Exercise Set up the card grid container

Set up a .cards flex container. Add display: flex, flex-wrap: wrap and gap: 1rem. No cards needed yet; just write the container.

Show example solution

/* card grid container */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Exercise Give cards flex: 1 0 200px

Add a .cards > .card selector and write flex: 1 0 200px. Each card now starts at 200 pixels, never shrinks, and shares free space evenly.

Show example solution

/* make the cards flexible */
.cards > .card {
  flex: 1 0 200px;
}

Test yourself

Match each piece of the grid to its role

flex-wrap: wrap

Turns on wrapping
gap: 1rem

Space between items
flex: 1 0 200px

Grow, shrink, basis
display: flex

Flex container
What does flex: 1 0 200px mean?
- grow 1, shrink 0, basis 200px
- grow 0, shrink 1, basis 200px
- grow 1, shrink 200, basis 0
- grow 200, shrink 1, basis 0
Show answer

grow 1, shrink 0, basis 200px — Correct. The flex shorthand takes grow, shrink and basis in that order.

Next lesson: :hover and :focus

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies