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.
A grid with a grid-gap of 25 pixels.
<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>
The grid-gap property is a shorthand property for:
The grid-gap property is synonymous with gap. They can be used interchangeably.
grid-gap: grid-row-gap grid-column-gap;
| 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.
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 |
