Не всегда нам необходимы одинаковые интервалы между рядами и столбцами, и в этом случае к нам на помощь приходят свойства column-gap и row-gap.

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

.grid {
  row-gap: 20px; /* Грид-интервал между рядами */
  column-gap: 50px; /* Грид-интервал между столбцами */
}

На самом деле с помощью свойства gap тоже можно задавать интервал отдельно для столбцов и для рядов. Если задать gap не одно, а два значения, первое будет определять интервал между рядами, а второе — между столбцами. Второе значение задаётся через пробел после первого:

.grid {
  /*
  Грид-интервал между рядами 20px,
  грид-интервал между столбцами 50px.
  */

  gap: 20px 50px;
}