The **`column-gap` property** in #key# CSS: Cascade Style Sheets #key# defines the gap we want between the columns by adding a space between them. 

# 
#  Syntax

---
```css
column-gap: length|normal|initial|inherit;
```
---

# 
## Property values

- **`length`**: It specifies the length of the gap we want between the columns. 

- **`normal`**: It is the default value, and specifies that there is a normal gap between the columns.

- **`initial`**: This sets the value to its default value.

- **`inherit`**: This inherits property from its parent value.

##
## Code

The following is the basic #key# HTML: HyperText Markup Language #key# & CSS code to demonstrate the use of the column-gap property:

<title>Example</title>

<div class="gap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</div>

.gap
{
  display: grid;
  height: 250px;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 50px;
}
.gap > div 
{
  background-color: rgb(22, 192, 204);
  border: 6px solid black;
}

codemirror

# 
## Explanation

In this example, we have made a grid and set the `column-gap` as `50px`. We can also set the gap according to our choice. 

What is the CSS column-gap property?

Defines space between columns, syntax includes length, normal, initial, and inherit values.