---
id: 5a9036ee38fddaf9a66b5d35
title: Create a Column Gap Using grid-column-gap
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD'
---
## Description
So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the grid-column-gap
property like this:
grid-column-gap: 10px;
This creates 10px of empty space between all of our columns.
## Instructions
Give the columns in the grid a 20px
gap.
## Tests
```yml
tests:
- text: container
class should have a grid-column-gap
property that has the value of 20px
.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi), 'container
class should have a grid-column-gap
property that has the value of 20px
.');
```
## Challenge Seed
## Solution
```js
var code = ".container {grid-column-gap: 20px;}"
```