78 lines
1.9 KiB
Markdown
78 lines
1.9 KiB
Markdown
|
---
|
||
|
|
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>
|