gap in Grid

The gap property creates space between grid items. It replaces margin-based spacing with a cleaner, more predictable approach. Works with both flexbox and grid.

Gap Syntax

CSS

/* Single value - all gaps */
.grid {
  display: grid;
  gap: 20px;
  /* 20px between all items */
}

/* Row and column gaps */
.grid {
  display: grid;
  gap: 20px 30px;
  /* row-gap: 20px, column-gap: 30px */
}

/* Individual gap properties */
.grid {
  display: grid;
  row-gap: 20px;
  column-gap: 30px;
}

/* Flexbox gap */
.flex {
  display: flex;
  gap: 20px;
  /* Space between items */
}

Grid Layouts with Gap

CSS

/* 3-column grid with gap */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}

/* Responsive grid with gap */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

/* Different row/column gaps */
.data-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 10px;
  column-gap: 20px;
}

/* Large gap for spacing */
.section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 40px;
}

Note

gap creates space between items. Works in both grid and flexbox. Cleaner than margin. Use for responsive spacing.

Grid introduction: [CSS Grid Introduction](/css/grid-intro).