coding180 icon
grid-row-gap, grid-column-gap, grid-gap attribute

grid-row-gap, grid-column-gap, grid-gap attribute

Home > Tutorials > CSS > CSS Grid Layout

grid-row-gap property sets the spacing between rows (row spacing), and the grid-column-gap property sets the spacing between columns (column spacing).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;

In the above code, grid-row-gap is used to set the row spacing and grid-column-gap to set the column spacing.

css grid gap

grid-gap attribute is a combined shorthand for grid-column-gap and grid-row-gap

grid-gap: <grid-row-gap> <grid-column-gap>;

Therefore, the above CSS code is equivalent to the following code.

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

If grid-gapthe second value is omitted, the browser considers the second value equal to the first value.

According to the latest standard, the prefixes of the above three attribute names grid-have been removed, grid-column-gap and grid-row-gap written as column-gap and row-gapgrid-gap written as gap.



Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel