CSS Grid Gaps

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

<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

<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

<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

<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

<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>