column-gap
==========

The **`column-gap`** CSS property sets the size of the gap (gutter) between an element's columns.

Initially a part of Multi-column Layout, the definition of `column-gap` has been broadened to include multiple layout methods. Now specified in Box Alignment, it may be used in Multi-column, Flexible Box, and Grid layouts.

Early versions of the specification called this property `grid-column-gap`, and to maintain compatibility with legacy websites, browsers will still accept `grid-column-gap` as an alias for `column-gap`.

Try it
------

Syntax
------


```css
/\* Keyword value \*/
column-gap: normal;

/\* <length> values \*/
column-gap: 3px;
column-gap: 2.5em;

/\* <percentage> value \*/
column-gap: 3%;

/\* Global values \*/
column-gap: inherit;
column-gap: initial;
column-gap: revert;
column-gap: revert-layer;
column-gap: unset;
```


The `column-gap` property is specified as one of the values listed below.

### Values

`normal`

The browser's default spacing is used between columns. For multi-column layout this is specified as `1em`. For all other layout types it is 0.

`<length>`

The size of the gap between columns, defined as a `<length>`. The `<length>` property's value must be non-negative.

`<percentage>`

The size of the gap between columns, defined as a `<percentage>`. The `<percentage>` property's value must be non-negative.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `normal` |
| Applies to | multi-column elements, flex containers, grid containers |
| Inherited | no |
| Percentages | refer to corresponding dimension of the content area |
| Computed value | as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements |
| Animation type | a length, percentage or calc(); |

Formal syntax
-------------
```

column-gap =   
  normal                     |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Examples
--------

### Flex layout

In this example, a flex container contains six flex items of two different widths (`200px` and `300px`), creating flex items that are not laid out as a grid. The `column-gap` property is used to add horizontal space between the adjacent flex items.

#### HTML


```html
<div class="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS

To create a flex container, we set its `display` property value to `flex`. We then use the `flex-flow` shorthand property to set the `flex-direction` to row (the default) and `flex-wrap` to `wrap`, allowing the flex items to flow onto new lines if needed. By default, flex items stretch to be as tall as their container. By setting a `height`, even the empty flex items will be `100px` tall.

To better demonstrate the `column-gap` property, the flex items in this example have two different width values. The width of the flex items is set within the `<div>` flex items. We use the `flex-basis` component of the `flex` shorthand property to make all the flex items `200px` wide. We then target every third flex item by using the `:nth-of-type(3n)` selector, widening them to `300px`.

The `column-gap` value is set as `20px` on the flex container to create a `20px` gap between the adjacent flex items in each row.


```css
.flexbox {
  display: flex;
  flex-flow: row wrap;
  height: 100px;
  column-gap: 20px;
}

.flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 200px;
}
div:nth-of-type(3n) {
  flex: 300px;
}
```


#### Result

**Note:** While there is horizontal space between adjacent flex items in each flex row, there is no space between the rows. To set vertical space between flex rows, you can specify a non-zero value for the `row-gap` property. The `gap` shorthand property is also available to set both the `row-gap` and `column-gap` in one declaration, in that order.

### Grid layout

#### HTML


```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```


#### CSS


```css
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```


#### Result

### Multi-column layout

#### HTML


```html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  `column-gap` property. Don't you think that's fun and exciting? I sure do!
</p>
```


#### CSS


```css
.content-box {
  column-count: 3;
  column-gap: 40px;
}
```


#### Result

Specifications
--------------

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |
| CSS Grid Layout Module Level 2 # gutters |
| CSS Multi-column Layout Module Level 1 # column-gap |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related CSS properties: `row-gap`, `gap`
* Grid Layout Guide: *Basic concepts of grid layout - Gutters*
* Multi-column Layout Guide: *Styling Columns*