Grid spacing: the row-gap and column-gap properties

We do not always need the equal spacing between rows and columns. In these cases the column-gap and row-gap properties can come to our rescue.

As you might have already guessed, the first property sets the spacing between columns, and the second sets the spacing between rows.

.grid {
  row-gap: 20px; /* Grid spacing between rows */
  column-gap: 50px; /* Grid spacing between columns */
}

In fact, we can use the gap property to assign spacing separately to columns and to rows. If you assign not just one, but two values to gap, the first will determine the spacing between the rows and the second will determine the spacing between columns. The second value is separated by a space from the first value:

.grid {
  /*
  Grid spacing between rows of 20px,
  Grid spacing between columns of 50px
  */

  gap: 20px 50px;
}