W3docs
en
Log in

CSS grid-gap Property

The grid-gap CSS property is used to define the size of the gap between the rows and columns. See this property in action.

The grid-gap property sets the size of the gap (gutter) between a grid layout's rows and columns. The gap is the empty space between grid tracks only — it never adds space on the outer edges of the grid, so the container's own padding still controls the outer margin.

grid-gap is a shorthand for two longhand properties:

grid-gap vs. gap

The standard gap property has replaced grid-gap. The two behave identically inside a grid container, but grid-gap is now considered legacy: it exists mainly for older browsers that shipped the grid-prefixed version before the unprefixed gap was standardized. Modern browsers still support grid-gap as an alias, so existing stylesheets keep working.

For new projects, prefer gap — it works in grid and flexbox layouts, whereas grid-gap only ever applied to grids:

/* Legacy (grid only) */
.grid { display: grid; grid-gap: 20px 40px; }

/* Modern, preferred */
.grid { display: grid; gap: 20px 40px; }
Initial Value0
Applies toGrid containers.
InheritedNo.
AnimatableYes. grid-gap is animatable.
VersionCSS Grid Layout Module Level 1
DOM Syntaxobject.style.gridGap = "30px 70px";

Syntax

CSS grid-gap Property

grid-gap: <row-gap> <column-gap>;

The property accepts one or two length values:

  • One value sets the row gap and the column gap to the same size.
  • Two values set the row gap first, then the column gap (grid-gap: 20px 40px; means a 20px gap between rows and a 40px gap between columns).

Each value may be any non-negative length (px, em, rem, etc.) or a percentage. The keywords initial and inherit are also valid.

Example of the grid-gap property:

Example of a grid container with the grid-gap property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 60px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>
Try it Yourself »

Result

![CSS grid-gap Property](/uploads/media/default/0001/04/91075707603fef2480969077540f999b813f30aa.png "Grid with a 60px gap between every row and column" =420x)

Example of the grid-gap property specified in percentages:

A percentage gap is resolved against the grid container's own dimensions — the column gap is a percentage of the container's width, and the row gap is a percentage of its height. Percentages are handy for fluid layouts, but they make the gutter grow with the container, so fixed lengths are usually more predictable.

Example of a grid container where the grid gap is defined by percentages

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 20%;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>
Try it Yourself »

Example of the grid-gap property with two values:

When you pass two values, the first sets the row gap and the second sets the column gap. Here the rows are separated by 20px and the columns by 80px:

Example of a CSS grid-gap property

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 20px 80px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
grid-row-gapSpecifies the size of the gap between the rows in a grid layout. The default value is 0. When using the two-value syntax, this corresponds to the first value.
grid-column-gapSpecifies the size of the gap between the columns in a grid layout. The default value is 0. When using the two-value syntax, this corresponds to the second value.Play it »
initialMakes the property use its default value.
inheritInherits the property from its parent element.

Browser support

grid-gap is supported in all modern browsers. Because it is an alias for the standard gap property, you generally don't need both. If you must support very old grid implementations, you can list grid-gap for them and gap for everything else:

.grid {
  display: grid;
  grid-gap: 20px;  /* fallback for legacy browsers */
  gap: 20px;       /* standard property wins where supported */
}

Practice

Practice
What is the use of the 'grid-gap' property in CSS?
What is the use of the 'grid-gap' property in CSS?
Was this page helpful?