CSS Grid Gaps

Grid gaps put clean, consistent space between tracks without adding a single extra margin to any item -- and unlike margin, that space never appears on the outer edge of the grid.

In this page:

Why Gaps Beat Margins in a Grid
column-gap for Horizontal Spacing
row-gap for Vertical Spacing
The gap Shorthand
Gaps Interact with minmax and fr Sizing

Why Gaps Beat Margins in a Grid

Adding margin to grid items pushes the whole grid wider or taller and creates uneven spacing at the container edges; row-gap and column-gap instead insert space only between tracks, leaving the container edges flush.

Example: Why Gaps Beat Margins in a Grid

css

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>Flush edges</div>
  <div>Even gaps</div>
  <div>No margin needed</div>
</div>

column-gap for Horizontal Spacing

column-gap sets the space between columns only, leaving vertical spacing between rows untouched -- useful when you want tight vertical rhythm but breathing room between side-by-side columns.

Example: column-gap for Horizontal Spacing

css

<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 30px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>1</div><div>2</div><div>3</div>
</div>

row-gap for Vertical Spacing

row-gap is the vertical counterpart to column-gap, controlling only the space between rows and leaving horizontal spacing between columns completely untouched. Set it independently when your layout needs generous vertical breathing room but tight horizontal grouping, or vice versa.

Example: row-gap for Vertical Spacing

css

<style>
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 30px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

The gap Shorthand

gap: 20px 10px sets row-gap to 20px and column-gap to 10px in one declaration, with the row value always listed first; gap: 16px alone applies 16px to both axes at once. The shorthand is generally preferred over the two longhand properties unless you need to change one axis independently later in your stylesheet.

Example: The gap Shorthand

css

<style>
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 10px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="container">
  <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

Gaps Interact with minmax and fr Sizing

Gap space is subtracted from the space fr and auto-fit/auto-fill calculations have to work with, so a large gap value on a narrow container can make tracks with minmax() wrap sooner than you might expect -- always test gap and track sizing together.

Example: Gaps Interact with minmax and fr Sizing

css

<style>
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 40px;
  background: #eef;
  padding: 10px;
}
.container div {
  background: seagreen;
  color: white;
  padding: 16px;
}
</style>
<div class="container">
  <div>Large gap can push tracks to wrap sooner</div>
  <div>Card</div>
</div>

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson CSS Grid Tracks Next Lesson → CSS Grid Align