---
id: 5a9036ee38fddaf9a66b5d37
title: Add Gaps Faster with grid-gap
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv'
---
## Description
grid-gap
is a shorthand property for grid-row-gap
and grid-column-gap
from the previous two challenges that's more convenient to use. If grid-gap
has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.
## Instructions
Use grid-gap
to introduce a 10px
gap between the rows and 20px
gap between the columns.
## Tests
```yml
tests:
- text: container
class should have a grid-gap
property that introduces 10px
gap between the rows and 20px
gap between the columns.
testString: assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi), 'container
class should have a grid-gap
property that introduces 10px
gap between the rows and 20px
gap between the columns.');
```
## Challenge Seed
## Solution
```js
var code = ".container {grid-gap: 10px 20px;}"
```