Gaps Between Cells

The cards touch each other. We could give each card a margin, but there's a better way, which you know from flexbox: the gap property. It sets the space between the rows and the columns of the grid.

.cards {
	gap: 1rem;
}

The gaps are only between the cells, never at the edges of the grid, so the outer cards stay lined up with the rest of the page. The browser takes the gaps away from the width first, and the fr columns share what's left.

With two values, the first one is the gap between the rows and the second one the gap between the columns: gap: 2rem 1rem. Each of them can also be set on its own, with the row-gap and column-gap properties.