CssHow-ToBeginner · 3 min read

How to Use Gap in CSS Grid: Simple Syntax and Examples

Use the gap property in CSS Grid to add space between rows and columns inside the grid container. You can set a single value for equal spacing or two values to control row and column gaps separately, like gap: 10px 20px;.

📐

Syntax

The gap property sets the spacing between grid rows and columns inside a grid container.

gap: <row-gap> <column-gap>; — sets row and column gaps.
If only one value is given, it applies to both rows and columns.
Values can be any CSS length units like px, rem, or percentages.

css

.grid-container {
  display: grid;
  gap: 10px 20px; /* 10px row gap, 20px column gap */
}

💻

Example

This example shows a 3x3 grid with a 15px gap between rows and columns. The gap property adds space evenly between all grid items.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Grid Gap Example</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    gap: 15px;
    background-color: #eee;
    padding: 10px;
  }
  .grid-item {
    background-color: #4CAF50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border-radius: 5px;
  }
</style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>
</html>

Output

A 3 by 3 grid of green boxes numbered 1 to 9 with equal 15px space between each box horizontally and vertically on a light gray background.

⚠️

Common Pitfalls

Common mistakes when using gap in CSS Grid include:

Using gap on non-grid containers (it won't work).
Confusing gap with margin or padding on grid items.
Setting only one value when different row and column gaps are needed.
Using old properties like grid-row-gap and grid-column-gap instead of the shorthand gap.

css

/* Wrong: gap on flex container does nothing */
.flex-container {
  display: flex;
  gap: 20px; /* No effect on flex in some browsers without support */
}

/* Right: gap on grid container works */
.grid-container {
  display: grid;
  gap: 20px;
}

📊

Quick Reference

Property	Description	Example
gap	Sets row and column gaps together	gap: 10px 20px;
row-gap	Sets only the row gap	row-gap: 15px;
column-gap	Sets only the column gap	column-gap: 25px;

✅

Key Takeaways

Use the CSS Grid gap property to add space between rows and columns easily.

You can specify one value for equal gaps or two values for different row and column gaps.

gap only works on grid containers, not on regular block or flex containers.

Avoid using margins on grid items to create gaps; gap is cleaner and more consistent.

Modern browsers support gap fully for CSS Grid, so prefer it over older gap properties.