CSS grid-gap Property
Description
The grid-gap
property determines the distance (gap) between rows and columns in the grid layout and is a shorthand property for the grid-row-gap and grid-column-gap properties.
The CSS Grid Layout module initially defined the property as a
grid-gap
, later it is replaced by the gap property. However, to support a wider range of browsers that implemented the grid-gap
property rather than the gap , you should use the grid-gap
property.The grid-gap property has been deprecated or is no longer in any CSS working groups.
- Initial value
- See individual properties
- Applies to
- Grid containers
- Inherited
- No
- Computed value
- See individual properties
- Animatable
- Yes
- JavaScript syntax
- object.style.gap
Syntax
gap: <row-gap> <column-gap>?
Values
- normalThe default row or column spacing used by browsers. For a multi-column layout, this value corresponds to 1em , for all other types it is 0 . This is the default value.
- length / percentageSpecifies the spacing between rows or columns using a valid length value, or a percentage value. The value must be positive.
Example
<div class="grid-container">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
<div class="grid-container2">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
html, body {
height: 100%;
margin: 0;
overflow: auto;
}
.grid-container,
.grid-container2 {
display: grid;
margin-top: 5px;
padding: 10px;
background: rgb(0,150,208);
}
.grid-container > div,
.grid-container2 > div {
background: rgb(241,101,41);
border: 1px solid #000;
text-align: center;
}
.grid-container {
grid-template-columns: 50px auto 100px;
grid-gap: 10px;
}
.grid-container2 {
height: 50%;
grid-template-columns: auto auto auto;
grid-gap: 20% 10px;
}
Browser Support
The following table will show you the current browser support for the CSS grid-gap
property.
Desktop | |||||
? | ? | ? | ? | ? |
Tablets / Mobile | |||||
? | ? | ? | ? | ? | ? |