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
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????