CSS grid-gap Property

The grid-gap is the space between grid rows and columns.

It accepts any length value, such as, px, %, em, and others.

The default is 0, meaning no gaps between rows and columns.

Example

#

A grid with a grid-gap of 25 pixels.

1
2
3
4
5
6
7
8
9
10
11
<style>
  .grid-container {
    background-color: steelblue;
    padding: 10px;
    display: grid;
    grid-gap: 25px;
    grid-template-columns: auto auto auto auto;
  }

  .grid-container > div {
    background-color: aliceblue;
    text-align: center;
    padding: 15px 5px;
    font-size: 18px;
  }
</style>

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

Using grid-gap

The grid-gap property is a shorthand property for:

The grid-gap property is synonymous with gap. They can be used interchangeably.

Syntax

grid-gap: grid-row-gap grid-column-gap;

Values

#

Value Description
grid-row-gap Space between the rows. Default value is 0.
grid-column-gap Space between the columns. Default value is 0.

Note: If only one value is specified, it will be used for both row and column gap values.


Browser support

This table shows when grid-gap support started for each browser.

Chrome
57 Mar 2017
Firefox
52 Mar 2017
IE/Edge
16 Sep 2017
Opera
44 Mar 2017
Safari
10 Sep 2016

You may also like

Guides