Список преимуществ уже похож на себя из макета. Но не хватает отступов между элементами.

Добавим эти отступы. Использовать в данном случае margin не очень удобно, ведь он также влияет на расстояние до границ родительского элемента. А ещё в грид-контейнере внешние отступы двух соседних элементов складываются и по горизонтали и по вертикали. Так что расстояние между элементами оказывается в два раза больше указанного.

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

Обратите внимание, что gap добавляется грид-контейнеру, в то время как margin — элементам.

С помощью gap отступы можно указать отдельно по вертикали и по горизонтали: column-gap отвечает за расстояние между колонками, а row-gap — за расстояние между рядами.

.grid-container {
  column-gap: 15px;
  row-gap: 5px;
}

Если же отступы одинаковы, удобно использовать составное свойство gap:

.grid-container {
  gap: 20px;
}

Потренируемся указывать отступы между грид-элементами с помощью column-gap и row-gap. А после используем gap, чтобы задать элементам отступы как на макете.

.grid-container {
  gap: 20px 50px;
}