CSS gap Property – How to Create Gaps between Rows and Columns

gap is a shorthand for the row-gap and column-gap properties.

In other words, instead of writing:

div {
  row-gap: 40px;
  column-gap: 15px;
}

You can alternatively use the gap property to shorten your code like so:

div {
  gap: 40px 15px;
}

Or suppose your column and row have the same values. In that case, instead of writing:

div {
  row-gap: 30px;
  column-gap: 30px;
}

You can alternatively use the gap property to shorten your code as follows:

div {
  gap: 30px;
}

CSS gap’s syntax

gap: row-gap column-gap;