The gap property specifies the space between rows and columns.
The gap value can be any length value, including percentages.
This property is used by column, flexbox and grid layout systems.
A flex layout with a gap of 25 pixels.
<style>
.flex {
background-color: #776fac;
padding: 5px;
display: flex;
flex-wrap: wrap;
gap: 25px;
}
.flex > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
width: 100px;
}
</style>
<div class="flex">
<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>13</div>
</div>
gap: length | normal | initial | inherit;
| Value | Description |
|---|---|
| length | Gap width any length value or percentage. |
| normal | Default. Sets a normal gap, which is 1em. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see different gap values.
<style>
.flex-gap {
background-color: #776fac;
padding: 5px;
display: flex;
flex-wrap: wrap;
gap: normal;
}
.flex-gap > div {
background-color: aliceblue;
margin: 5px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 18px;
width: 100px;
}
</style>
<div class="flex-gap">
<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>13</div>
</div>
This table shows when gap support started for each browser.
 Chrome
|
50.0 | Apr 2016 |
 Firefox
|
52.0 | Mar 2017 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
37.0 | May 2016 |
 Safari
|
9.0 | Sep 2015 |
