freeCodeCamp

1.9 KiB

Raw Blame History

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

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 grid-column-gap seguinte forma:

intervalo de coluna de grade: 10px;

Isso cria 10px de espaço vazio entre todas as nossas colunas.

Instructions

Dê as colunas na grade uma lacuna de 20px .

Tests

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>.");'

Challenge Seed

<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>

Solution

// solution required

1.9 KiB Raw Blame History