Flexbox or Grid?

Now you know two ways to lay out elements. When should you use which?

• Flexbox lays out elements in one direction: in a row or in a column. The sizes come from the content: each item takes as much space as it needs, and the free space can be shared out with justify-content or flex: 1. It's ideal for a row of links or buttons, or a heading with a link next to it.
• Grid lays out elements in two directions at once: in rows and columns. The structure comes from the container: first we draw the columns or the areas, and then we put the items into them. It's ideal for galleries, cards and the layout of a whole page.

The cards could also be laid out with flexbox and flex-wrap. But each row of a flex container is laid out on its own: if the cards grow with flex-grow: 1, the cards in a shorter last row get wider than the ones above them. In a grid, each card stays in its column.

The two are often combined: grid for the layout of the page, flexbox for the smaller parts inside it. A grid item can be a flex container at the same time, and the other way round.

Our footer is a good example. It's a grid item (it's in the footer area), and inside it, there are two elements that should be next to each other: the source and a link back to the top. That's one direction, so it's a job for flexbox.