---
id: 5a9036ee38fddaf9a66b5d35
title: Create a Column Gap Using grid-column-gap
challengeType: 0
videoUrl: ''
localeTitle: Criar uma lacuna de coluna usando a lacuna da coluna de grade
---

## Description
<section id="description"> Até agora, nas grades que você criou, as colunas foram todas apertadas umas contra as outras. Às vezes você quer uma lacuna entre as colunas. Para adicionar uma lacuna entre as colunas, use a propriedade <code>grid-column-gap</code> seguinte forma: <blockquote> intervalo de coluna de grade: 10px; </blockquote> Isso cria 10px de espaço vazio entre todas as nossas colunas. </section>

## Instructions
<section id="instructions"> Dê as colunas na grade uma lacuna de <code>20px</code> . </section>

## Tests
<section id='tests'>

```yml
tests:
  - text: <code>container</code> classe <code>container</code> deve ter uma propriedade <code>grid-column-gap</code> que tenha o valor de <code>20px</code> .
    testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.");'

```

</section>

## Challenge Seed
<section id='challengeSeed'>

<div id='html-seed'>

```html
<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}

  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* add your code below this line */


    /* add your code above this line */
  }
</style>

<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

```

</div>



</section>

## Solution
<section id='solution'>

```js
// solution required
```
</section>