CSS Academy · Lesson

Gap and Grid Placement

Add space between grid cells with gap and place items using grid-column and grid-row.

Gap in CSS Grid

The gap property sets the space between grid rows and columns. It replaces the older grid-gap property and also works in Flexbox.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; /* equal row and column gap */
}

Set row and column gaps independently:

.grid {
  row-gap: 32px;
  column-gap: 16px;
  /* or: gap: 32px 16px; (row column) */
}