В реальных проектах часто бывает так, что при создании сетки между столбцами и рядами требуется оставить небольшой промежуток.

Разработчики спецификации гридов предусмотрели и эту возможность, придумав для нас свойство gap, позволяющее добавлять равномерный интервал сразу и между рядами, и между столбцами. Определяется это свойство в px, % и других единицах измерения:

.grid {
  gap: 10px;
}

Выглядят интервалы следующим образом:

Интересная особенность грид-интервалов: они не появляются между краями контейнера и крайними элементами. То есть это пустые пространства между элементами только изнутри грида.