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 is used to specify the size of the gap between the rows, and between the columns. This property is a shorthand for the following properties:

The standard gap property has replaced grid-gap. The grid-gap property is now considered legacy and is primarily needed for older browsers that implemented the prefixed version before the standard gap property was established. For new projects, it is recommended to use the standard gap property.

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: grid-row-gap | grid-column-gap | initial | inherit;

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

Example of the grid-gap property specified in percentages:

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:

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.

Practice

Practice

What is the use of the 'grid-gap' property in CSS?