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

Мы не знаем, какой ширины окажется окно браузера у пользователя и какая карточка будет в ряду последней. Из-за этого мы не можем использовать :nth-child, чтобы убрать у неё отступ справа. Как быть?

Можно использовать свойство gap для флекса. При этом не важно, какая карточка будет последняя в ряду.

Но есть другой способ выстроить карточки внутри контейнера — использовать гриды. В этом случае мы сможем задать количество колонок.

Напишем новые стили для списка карточек, используя на этот раз гриды и gap.

.grid-container {
  display: grid;
  gap: 10px;
}

Так как при описании шаблона грид-контейнера мы указываем ширину колонок, то задавать ширину самим карточкам больше не нужно.

Все колонки в списке должны быть одинаковой ширины. В этом случае удобно использовать значение-функцию repeat (от английского «повторить»). В скобках после repeat указывают количество колонок и их ширину. Значения разделяют запятой:

grid-template-columns: repeat(количество колонок, ширина колонки);

Этот код разобьёт грид-контейнер на четыре колонки шириной 100px:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
}

Удалим весь код, который мы написали для реализации на флексах. После этого превратим список карточек в грид-контейнер и добавим отступы между карточками с помощью свойства gap. Используем repeat, чтобы разделить список на колонки, и попробуем задавать разные значения.