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.- Initial value
- normal
- Applies to
- Multi-column elements
- Inherited
- No
- Media
- Visual
- Computed value
- Absolute length or 'normal'
- Animatable
- No
- CSS Version
- CSS3
- 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
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| ? | ? | ? | ? | ? | ? |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| ? | ? | ? | ? | ? | ? |
