Промежутки между ячейками

Карточки касаются друг друга. Можно было бы задать каждой карточке внешний отступ, но есть способ лучше, знакомый вам по flexbox: свойство gap. Оно задаёт расстояние между строками и столбцами сетки.

.cards {
	gap: 1rem;
}

Промежутки есть только между ячейками, но не по краям сетки, поэтому крайние карточки остаются вровень с остальной страницей. Сначала браузер вычитает промежутки из ширины, а столбцы в fr делят то, что осталось.

Если значений два, первое — это промежуток между строками, а второе — между столбцами: gap: 2rem 1rem. Каждый из них можно задать и отдельно свойствами row-gap и column-gap.