# column-gap property

The `column-gap` property specifies a gap between columns in a multi-column text, as well as a gap between columns in a grid. The property value is any size units or the `normal` keyword (by default), at which the browser itself selects the optimal distance between columns.

## Syntax

`selector { column-gap: value; }`

## Example

In this example the columns number `column-count` (`3` items) and the gap between them `column-gap` of `50px` are given. And columns width will be automatically selected to satisfy these conditions (the number of columns and the gap between them):

`<div id="elem"> some long text </div>` `#elem { column-count: 3; column-gap: 50px; text-align: justify; }`

:

## Example . The normal value

In this example, the `column-width` is `150px`, their number `column-count` is in the `auto` value, and the `column-gap` in the `normal` value. Thus, the browser itself will select the required number of columns and the space between them (but their width will be `150px`):

`<div id="elem"> some long text </div>` `#elem { column-gap: normal; column-count: auto; column-width: 150px; text-align: justify; }`

:

## Example

Let's set the gap between columns in a grid:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> </div>` `#parent { display: grid; column-gap: 10px; padding: 10px; border: 2px solid #696989; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-column: 1 / 2; } #elem2 { grid-column: 2 / 3; } #elem3 { grid-column: 3 / 4; }`

:

## Example

Now let's set the gap between columns in `%`:

`<div id="parent"> <div id="elem1">1</div> <div id="elem2">2</div> <div id="elem3">3</div> </div>` `#parent { display: grid; column-gap: 5%; padding: 10px; border: 2px solid #696989; } #parent > div { padding: 10px; border: 1px solid #696989; } #elem1 { grid-column: 1 / 2; } #elem2 { grid-column: 2 / 3; } #elem3 { grid-column: 3 / 4; }`

:

## See also

- the `column-width` property
  that specifies a column width
- the `column-count` property
  that specifies a number of columns
- the `gap` property
  that specifies a gap between elements in a grid
- the `row-gap` property
  that specifies a gap between rows in a grid

← →
↑
en ru