CSS grid-column-gap Property
Description
The grid-column-gap
property determines the distance (gap) between columns in a grid layout.
The CSS Grid Layout module initially defined the property as
grid-column-gap
, later it is replaced by the column-gap property. However, to support a wider range of browsers that implemented the grid-column-gap
property rather than column-gap , you should use the grid-column-gap
property.The grid-column-gap property has been deprecated or is no longer in any CSS working groups.
- Initial value
- normal
- Applies to
- Multi-column elements
- Inherited
- No
- Computed value
- Absolute length or 'normal'
- Animatable
- No
- JavaScript syntax
- object.style.columnGap
Syntax
column-gap: <length> | normal
Values
- <length>A floating-point number, followed by either an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px), that indicates the width of the gap between columns.
- normalThe width of the normal value is user-agent specific, but 1em is suggested.
Example
<div class="grid-container">
<div>100px</div>
<div>auto</div>
<div>50px</div>
<div>auto</div>
<div>100px</div>
<div>auto</div>
<div>50px</div>
<div>auto</div>
</div>
<div class="grid-container2">
<div>1fr</div>
<div>1fr</div>
<div>2fr</div>
<div>1fr</div>
<div>1fr</div>
<div>2fr</div>
</div>
.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;
padding: 20px 0;
}
.grid-container {
grid-template-columns: 100px auto 50px auto;
grid-column-gap: 10px;
}
.grid-container2 {
grid-template-columns: 1fr 1fr 2fr;
grid-column-gap: 20%;
}
Browser Support
The following table will show you the current browser support for the CSS grid-column-gap
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
? | ? | ? | ? | ? |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
? | ? | ? | ? | ? | ? |