chore(learn): remove other language curriculum Chinese (#39745)
This commit is contained in:
Randell Dawson
GitHub
@ -1,74 +0,0 @@
|
||||
---
|
||||
id: 5a9036d038fddaf9a66b5d32
|
||||
title: Add Columns with grid-template-columns
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Adicionar colunas com colunas de modelo de grade
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Simplesmente criar um elemento de grade não te leva muito longe. Você precisa definir a estrutura da grade também. Para adicionar algumas colunas à grade, use a propriedade <code>grid-template-columns</code> em um container de grade, conforme demonstrado abaixo: <blockquote> .container { <br> display: grid; <br> grid-template-columns: 50px 50px; <br> } </blockquote> Isso dará à sua grade duas colunas com 50 pixels de largura cada. O número de parâmetros fornecidos para a propriedade <code>grid-template-columns</code> indica o número de colunas na grade e o valor de cada parâmetro indica a largura de cada coluna. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Dê ao container de grade três colunas com <code>100px</code> largura cada. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> classe <code>container</code> deve ter uma propriedade <code>grid-template-columns</code> com três unidades de <code>100px</code> .
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</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;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* 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>
|
||||
@ -1,76 +0,0 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d37
|
||||
title: Add Gaps Faster with grid-gap
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Adicionar intervalos mais rápidos com lacuna de grade
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>grid-gap</code> é uma propriedade abreviada para <code>grid-row-gap</code> e <code>grid-column-gap</code> dos dois desafios anteriores que é mais conveniente de usar. Se <code>grid-gap</code> tiver um valor, ele criará uma lacuna entre todas as linhas e colunas. No entanto, se houver dois valores, ele usará o primeiro para definir o intervalo entre as linhas e o segundo valor para as colunas. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use o <code>grid-gap</code> para introduzir um intervalo de <code>10px</code> entre as linhas e um intervalo de <code>20px</code> entre as colunas. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> classe <code>container</code> deve ter uma propriedade <code>grid-gap</code> que introduz <code>10px</code> entre as linhas e <code>20px</code> entre as colunas.
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.");'
|
||||
|
||||
```
|
||||
|
||||
</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>
|
||||
@ -1,75 +0,0 @@
|
||||
---
|
||||
id: 5a9036e138fddaf9a66b5d33
|
||||
title: Add Rows with grid-template-rows
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Adicionar linhas com linhas de modelo de grade
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A grade que você criou no último desafio definirá o número de linhas automaticamente. Para ajustar as linhas manualmente, use a propriedade <code>grid-template-rows</code> da mesma maneira que você usou <code>grid-template-columns</code> no desafio anterior. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione duas linhas à grade com 50 <code>50px</code> altura cada. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> classe <code>container</code> deve ter uma propriedade <code>grid-template-rows</code> com duas unidades de <code>50px</code> .
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</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;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 100px 100px 100px;
|
||||
/* 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>
|
||||
@ -1,78 +0,0 @@
|
||||
---
|
||||
id: 5a90376038fddaf9a66b5d3c
|
||||
title: Align All Items Horizontally using justify-items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Alinhar todos os itens horizontalmente usando justificar itens
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Às vezes, você quer que todos os itens do seu CSS Grid compartilhem o mesmo alinhamento. Você pode usar as propriedades aprendidas anteriormente e alinhá-las individualmente ou pode alinhar todas de uma vez na horizontal usando <code>justify-items</code> no container de grade. Essa propriedade pode aceitar todos os mesmos valores que você aprendeu nos dois desafios anteriores, a diferença é que ela moverá <b>todos</b> os itens da grade para o alinhamento desejado. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use essa propriedade para centralizar todos os nossos itens horizontalmente. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> classe <code>container</code> deve ter uma propriedade <code>justify-items</code> que tenha o valor de <code>center</code> .
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{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;
|
||||
grid-gap: 10px;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,78 +0,0 @@
|
||||
---
|
||||
id: 5a94fdf869fb03452672e45b
|
||||
title: Align All Items Vertically using align-items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Alinhar todos os itens verticalmente usando itens de alinhamento
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Usar a propriedade <code>align-items</code> em um container de grade definirá o alinhamento vertical para todos os itens em nossa grade. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use agora para mover todos os itens para o final de cada célula. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> classe <code>container</code> deve ter uma propriedade <code>align-items</code> que tenha o valor de <code>end</code> .
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{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;
|
||||
grid-gap: 10px;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,82 +0,0 @@
|
||||
---
|
||||
id: 5a90374338fddaf9a66b5d3a
|
||||
title: Align an Item Horizontally using justify-self
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Alinhar um item horizontalmente usando justify-self
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Em CSS Grid, o conteúdo de cada item está localizado em uma caixa que é referida como uma <dfn>célula</dfn> . Você pode alinhar a posição do conteúdo dentro de sua célula horizontalmente usando a propriedade <code>justify-self</code> em um item da grade. Por padrão, essa propriedade tem um valor de <code>stretch</code> , o que fará com que o conteúdo preencha toda a largura da célula. Essa propriedade CSS Grid aceita outros valores também: <code>start</code> : alinha o conteúdo à esquerda da célula, <code>center</code> : alinha o conteúdo no centro da célula, <code>end</code> : alinha o conteúdo à direita da célula. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use a propriedade <code>justify-self</code> para centralizar o item com a classe <code>item2</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item2</code> classe <code>item2</code> deve ter uma propriedade <code>justify-self</code> que tenha o valor de <code>center</code> .
|
||||
testString: 'assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi), "<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background: LightSkyBlue;}
|
||||
|
||||
.item2 {
|
||||
background: LightSalmon;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{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;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,82 +0,0 @@
|
||||
---
|
||||
id: 5a90375238fddaf9a66b5d3b
|
||||
title: Align an Item Vertically using align-self
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Alinhar um item verticalmente usando auto-alinhamento
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Assim como você pode alinhar um item horizontalmente, há uma maneira de alinhar um item verticalmente também. Para fazer isso, você usa a propriedade <code>align-self</code> em um item. Esta propriedade aceita todos os mesmos valores que <code>justify-self</code> do último desafio. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Alinhar o item com a classe <code>item3</code> verticalmente no <code>end</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item3</code> classe <code>item3</code> deve ter uma propriedade <code>align-self</code> que tenha o valor de <code>end</code> .
|
||||
testString: 'assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi), "<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
|
||||
.item3 {
|
||||
background: PaleTurquoise;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
|
||||
.item4{background:LightPink;}
|
||||
.item5{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;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,77 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@ -1,77 +0,0 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d36
|
||||
title: Create a Row Gap using grid-row-gap
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar um intervalo de linhas usando intervalo de linhas de grade
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode adicionar uma lacuna entre as linhas de uma grade usando <code>grid-row-gap</code> da mesma maneira que adicionou uma lacuna entre as colunas no desafio anterior. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Crie uma lacuna para as linhas com <code>5px</code> altura. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> classe <code>container</code> deve ter uma propriedade <code>grid-row-gap</code> que tenha o valor de <code>5px</code> .
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</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>
|
||||
@ -1,95 +0,0 @@
|
||||
---
|
||||
id: 5a94fe5469fb03452672e461
|
||||
title: Create Flexible Layouts Using auto-fill
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar layouts flexíveis usando o preenchimento automático
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A função de repetição vem com uma opção chamada <dfn>preenchimento automático</dfn> . Isso permite que você insira automaticamente quantas linhas ou colunas desejar, dependendo do tamanho do container. Você pode criar layouts flexíveis ao combinar o <code>auto-fill</code> com <code>minmax</code> . Na visualização, as <code>grid-template-columns</code> são configuradas como <blockquote> repeat (preenchimento automático, minmax (60px, 1fr)); </blockquote> Quando o container muda de tamanho, essa configuração continua inserindo colunas de 60px e esticando-as até que possa inserir outra. <strong>Nota</strong> <br> Se o seu container não conseguir encaixar todos os itens em uma linha, ele será transferido para um novo. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Na primeira grade, use <code>auto-fill</code> com <code>repeat</code> para preencher a grade com colunas com largura mínima de <code>60px</code> <code>1fr</code> e máxima de <code>1fr</code> . Em seguida, redimensione a visualização para ver a ação de preenchimento automático. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> classe <code>container</code> deve ter uma propriedade <code>grid-template-columns</code> com <code>repeat</code> e <code>auto-fill</code> que preencherá a grade com colunas com largura mínima de <code>60px</code> <code>1fr</code> e máxima de <code>1fr</code> .
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* change the code below this line */
|
||||
|
||||
grid-template-columns: repeat(3, minmax(60px, 1fr));
|
||||
|
||||
/* change the code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.container2 {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: Silver;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(60px, 1fr));
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
<div class="container2">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,96 +0,0 @@
|
||||
---
|
||||
id: 5a94fe6269fb03452672e462
|
||||
title: Create Flexible Layouts Using auto-fit
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar layouts flexíveis usando o ajuste automático
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>auto-fit</code> funciona quase de forma idêntica ao <code>auto-fill</code>. A única diferença é que, quando o tamanho do container excede o tamanho de todos os itens combinados, o <code>auto-fill</code> continua inserindo linhas ou colunas vazias e empurra seus itens para o lado, enquanto o <code>auto-fit</code> recolhe essas linhas ou colunas vazias e estende seus itens para ajuste o tamanho do recipiente. <strong>Nota</strong> <br> Se o seu container não conseguir encaixar todos os itens em uma linha, ele será transferido para um novo. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Na segunda grade, use o <code>auto-fit</code> com <code>repeat</code> para preencher a grade com colunas que tenham uma largura mínima de <code>60px</code> <code>1fr</code> e máxima de 1 <code>1fr</code> . Em seguida, redimensione a pré-visualização para ver a diferença. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container2</code> classe <code>container2</code> deve ter uma propriedade <code>grid-template-columns</code> com <code>repeat</code> e <code>auto-fit</code> que preencherá a grade com colunas com largura mínima de <code>60px</code> e máxima de <code>1fr</code> .
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.container2 {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: Silver;
|
||||
display: grid;
|
||||
/* change the code below this line */
|
||||
|
||||
grid-template-columns: repeat(3, minmax(60px, 1fr));
|
||||
|
||||
/* change the code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
<div class="container2">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,108 +0,0 @@
|
||||
---
|
||||
id: 5a94fe8569fb03452672e464
|
||||
title: Create Grids within Grids
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Criar grades dentro de grades
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Transformar um elemento em uma grade afeta apenas o comportamento de seus descendentes diretos. Então, transformando um descendente direto em uma grade, você tem uma grade dentro de uma grade. Por exemplo, definindo as propriedades <code>display</code> e <code>grid-template-columns</code> do elemento com a classe <code>item3</code> , você cria uma grade em sua grade. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Transforme o elemento com a classe <code>item3</code> em uma grade com duas colunas com uma largura de <code>auto</code> e <code>1fr</code> usando <code>1fr</code> <code>display</code> e <code>grid-template-columns</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item3</code> classe <code>item3</code> deve ter uma propriedade <code>grid-template-columns</code> com <code>auto</code> e <code>1fr</code> como valores.
|
||||
testString: 'assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi), "<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.");'
|
||||
- text: <code>item3</code> classe <code>item3</code> deve ter uma propriedade de <code>display</code> com o valor da <code>grid</code> .
|
||||
testString: 'assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), "<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.container {
|
||||
font-size: 1.5em;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"advert header"
|
||||
"advert content"
|
||||
"advert footer";
|
||||
}
|
||||
.item1 {
|
||||
background: LightSkyBlue;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
background: LightSalmon;
|
||||
grid-area: advert;
|
||||
}
|
||||
|
||||
.item3 {
|
||||
background: PaleTurquoise;
|
||||
grid-area: content;
|
||||
/* enter your code below this line */
|
||||
|
||||
|
||||
/* enter your code above this line */
|
||||
}
|
||||
|
||||
.item4 {
|
||||
background: lightpink;
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
.itemOne {
|
||||
background: PaleGreen;
|
||||
}
|
||||
|
||||
.itemTwo {
|
||||
background: BlanchedAlmond;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">header</div>
|
||||
<div class="item2">advert</div>
|
||||
<div class="item3">
|
||||
<div class="itemOne">paragraph1</div>
|
||||
<div class="itemTwo">paragraph2</div>
|
||||
</div>
|
||||
<div class="item4">footer</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,73 +0,0 @@
|
||||
---
|
||||
id: 5a858944d96184f06fd60d61
|
||||
title: Create Your First CSS Grid
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crie sua primeira grade CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Transforme qualquer elemento HTML em um container de grade definindo sua propriedade de <code>display</code> como <code>grid</code> . Isso permite que você use todas as outras propriedades associadas ao CSS Grid. <strong>Nota</strong> <br> No CSS Grid, o elemento pai é referido como o <dfn>container</dfn> e seus filhos são chamados de <dfn>itens</dfn> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Altere a exibição do div com a classe de <code>container</code> para <code>grid</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> classe <code>container</code> deve ter uma propriedade de <code>display</code> com um valor de <code>grid</code> .
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>display</code> property with a value of <code>grid</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;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
/* 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>
|
||||
@ -1,81 +0,0 @@
|
||||
---
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: Divide the Grid Into an Area Template
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Divide a grade em um modelo de área
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode agrupar células de sua grade em uma <dfn>área</dfn> e dar à área um nome personalizado. Faça isso usando <code>grid-template-areas</code> no container da seguinte forma: <blockquote> áreas de modelo de grade: <br> "header header header" <br> "conteúdo do conteúdo do anúncio" <br> "footer footer footer"; </blockquote> O código acima mescla as três células principais em uma área denominada <code>header</code> , as três células inferiores em uma área de <code>footer</code> e cria duas áreas na linha do meio; <code>advert</code> e <code>content</code> . <strong>Nota</strong> <br> Cada palavra no código representa uma célula e cada par de aspas representa uma linha. Além de rótulos personalizados, você pode usar um ponto ( <code>.</code> ) Para designar uma célula vazia na grade. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Coloque o modelo de área para que o <code>advert</code> rotulado da célula se torne uma célula vazia. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code> classe <code>container</code> deve ter uma propriedade <code>grid-template-areas</code> semelhante à visualização, mas possui <code>.</code> em vez da área do <code>advert</code> .'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{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;
|
||||
grid-gap: 10px;
|
||||
/* change code below this line */
|
||||
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"footer footer footer";
|
||||
/* change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,78 +0,0 @@
|
||||
---
|
||||
id: 5a94fe4469fb03452672e460
|
||||
title: Limit Item Size Using the minmax Function
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Limitar o tamanho do item usando a função minmax
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Há outra função interna para usar com <code>grid-template-columns</code> e <code>grid-template-rows</code> chamada <code>minmax</code> . É usado para limitar o tamanho dos itens quando o container de grade muda de tamanho. Para fazer isso, você precisa especificar o intervalo de tamanho aceitável para o seu item. Aqui está um exemplo: <blockquote> colunas de modelo de grade: 100 px x minmax (50 px, 200 px); </blockquote> No código acima, as <code>grid-template-columns</code> são configuradas para criar duas colunas; o primeiro tem 100px de largura e o segundo tem a largura mínima de 50px e a largura máxima de 200px. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Usando a função <code>minmax</code> , substitua o <code>1fr</code> na função de <code>repeat</code> por um tamanho de coluna que tenha a largura mínima de <code>90px</code> e a largura máxima de <code>1fr</code> e redimensione o painel de visualização para ver o efeito. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> classe deve ter uma <code>grid-template-columns</code> propriedade que está configurado para repetir 3 colunas com a largura mínima de <code>90px</code> e largura máxima de <code>1fr</code> .
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* change the code below this line */
|
||||
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
/* change the code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,85 +0,0 @@
|
||||
---
|
||||
id: 5a94fe1369fb03452672e45d
|
||||
title: Place Items in Grid Areas Using the grid-area Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Colocar itens em áreas de grade usando a propriedade de área de grade
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Depois de criar um modelo de áreas para seu container de grade, conforme mostrado no desafio anterior, você pode colocar um item em sua área personalizada fazendo referência ao nome que você deu a ele. Para fazer isso, você usa a propriedade de <code>grid-area</code> em um item como este: <blockquote> .item1 {grid-area: header; } </blockquote> Isso permite que a grade saiba que você deseja que a classe <code>item1</code> vá para a área denominada <code>header</code> . Nesse caso, o item usará a linha superior inteira porque essa linha inteira é nomeada como a área do cabeçalho. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Coloque um elemento com a classe <code>item5</code> na área de <code>footer</code> usando a propriedade <code>grid-area</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item5</code> classe <code>item5</code> deve ter uma propriedade de <code>grid-area</code> que tenha o valor de <code>footer</code> .
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
|
||||
.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;
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"footer footer footer";
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,78 +0,0 @@
|
||||
---
|
||||
id: 5a94fe3669fb03452672e45f
|
||||
title: Reduce Repetition Using the repeat Function
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Reduzir a repetição usando a função de repetição
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Quando você usou <code>grid-template-columns</code> e <code>grid-template-rows</code> para definir a estrutura de uma grade, você inseriu um valor para cada linha ou coluna criada. Vamos dizer que você quer uma grade com 100 linhas da mesma altura. Não é muito prático inserir 100 valores individualmente. Felizmente, há uma maneira melhor - usando a função de <code>repeat</code> para especificar o número de vezes que você deseja que sua coluna ou linha seja repetida, seguida por uma vírgula e o valor que você deseja repetir. Aqui está um exemplo que criaria a grade de 100 linhas, cada linha com 50 px de altura. <blockquote> grid-template-rows: repeat (100, 50px); </blockquote> Você também pode repetir vários valores com a função de repetição e inserir a função entre outros valores ao definir uma estrutura de grade. Aqui está o que eu quero dizer: <blockquote> grid-template-columns: repeat (2, 1fr 50px) 20px; </blockquote> Isso se traduz em: <blockquote> grid-template-columns: 1fr 50px 1fr 50px 20px; </blockquote> <strong>Nota</strong> <br> <code>1fr 50px</code> é repetido duas vezes seguido por 20px. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Use <code>repeat</code> para remover a repetição da propriedade <code>grid-template-columns</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code> classe <code>container</code> deve ter uma propriedade <code>grid-template-columns</code> definida para repetir 3 colunas com a largura de <code>1fr</code> .
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* change the code below this line */
|
||||
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
/* change the code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,76 +0,0 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d34
|
||||
title: Use CSS Grid units to Change the Size of Columns and Rows
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use unidades de grade CSS para alterar o tamanho das colunas e linhas
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você pode usar unidades absolutas e relativas como <code>px</code> e <code>em</code> em CSS Grid para definir o tamanho de linhas e colunas. Você também pode usá-los: <code>fr</code> : define a coluna ou linha como uma fração do espaço disponível, <code>auto</code> : define a coluna ou linha automaticamente para a largura ou a altura de seu conteúdo, <code>%</code> : ajusta a coluna ou linha para a largura percentual do seu recipiente. Aqui está o código que gera a saída na pré-visualização: <blockquote> grid-template-columns: auto 50px 10% 2fr 1fr; </blockquote> Este trecho cria cinco colunas. A primeira coluna é tão ampla quanto seu conteúdo, a segunda coluna é 50px, a terceira coluna é 10% de seu container e nas duas últimas colunas; o espaço restante é dividido em três seções, duas são alocadas para a quarta coluna e uma para a quinta. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Faça uma grade com três colunas cujas larguras são as seguintes: 1fr, 100px e 2fr. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code> classe <code>container</code> deve ter uma propriedade <code>grid-template-columns</code> com três colunas com as seguintes larguras: <code>1fr, 100px, and 2fr</code> .'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</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;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* modify the code below this line */
|
||||
|
||||
grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
|
||||
/* modify the code above this line */
|
||||
grid-template-rows: 50px 50px;
|
||||
}
|
||||
</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>
|
||||
@ -1,80 +0,0 @@
|
||||
---
|
||||
id: 5a94fe2669fb03452672e45e
|
||||
title: Use grid-area Without Creating an Areas Template
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Usar área de grade sem criar um modelo de áreas
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A propriedade de <code>grid-area</code> você aprendeu no último desafio pode ser usada de outra maneira. Se sua grade não tiver um modelo de áreas para referência, você pode criar uma área em tempo real para que um item seja colocado assim: <blockquote> item1 {grid-area: 1/1/2/4; } </blockquote> Isso está usando os números de linha que você aprendeu anteriormente para definir onde a área para este item será. Os números no exemplo acima representam esses valores: <blockquote> área de grade: linha horizontal para iniciar em / linha vertical para iniciar em / linha horizontal para terminar em / linha vertical para terminar em; </blockquote> Assim, o item no exemplo consumirá as linhas entre as linhas 1 e 2 e as colunas entre as linhas 1 e 4. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Usando a propriedade <code>grid-area</code> , coloque o elemento com a classe <code>item5</code> entre a terceira e a quarta linhas horizontais e entre a primeira e a quarta linhas verticais. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: A classe <code>item5</code> deve ter uma propriedade <code>grid-area</code> de tal forma que esteja entre a terceira e a quarta linhas horizontais e entre a primeira e a quarta linhas verticais.
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi));'
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
|
||||
.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;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,81 +0,0 @@
|
||||
---
|
||||
id: 5a90372638fddaf9a66b5d38
|
||||
title: Use grid-column to Control Spacing
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use a coluna da grade para controlar o espaçamento
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Até este ponto, todas as propriedades que foram discutidas são para recipientes de grade. A propriedade da <code>grid-column</code> é a primeira a ser usada nos próprios itens da grade. As linhas horizontais e verticais hipotéticas que criam a grade são referidas como <dfn>linhas</dfn> . Essas linhas são numeradas começando com 1 no canto superior esquerdo da grade e se movendo para a direita para colunas e abaixo para linhas, contando para cima. É assim que as linhas parecem para uma grade 3x3: <div style="position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;"><p style="left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;"> linhas de coluna </p><p style="left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 1 </p><p style="left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 2 </p><p style="left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 3 </p><p style="left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 4 </p><p style="left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;"> linhas de linha </p><p style="left:-10%;top:-10%;font-size:130%;position:absolute;"> 1 </p><p style="left:-10%;top:21%;font-size:130%;position:absolute;"> 2 </p><p style="left:-10%;top:53%;font-size:130%;position:absolute;"> 3 </p><p style="left:-10%;top:85%;font-size:130%;position:absolute;"> 4 </p><div style="left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;"></div></div> Para controlar a quantidade de colunas que um item consumirá, você pode usar a propriedade de <code>grid-column</code> em conjunto com os números de linha nos quais deseja que o item seja iniciado e interrompido. Aqui está um exemplo: <blockquote> coluna de grade: 1/3; </blockquote> Isso fará com que o item comece na primeira linha vertical da grade à esquerda e se estenda até a terceira linha da grade, consumindo duas colunas. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Faça com que o item com a classe <code>item5</code> consuma as duas últimas colunas da grade. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item5</code> classe deve ter um <code>grid-column</code> propriedade que tem o valor de <code>2 / 4</code> .
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-column\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
|
||||
.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;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,82 +0,0 @@
|
||||
---
|
||||
id: 5a90373638fddaf9a66b5d39
|
||||
title: Use grid-row to Control Spacing
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use grid-row para controlar o espaçamento
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Claro, você pode fazer itens consumirem várias linhas, assim como você pode com colunas. Você define as linhas horizontais que deseja que um item inicie e pare ao usar a propriedade da <code>grid-row</code> grade em um item da grade. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Faça com que o elemento com a classe <code>item5</code> consuma as duas últimas linhas. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item5</code> classe deve ter um <code>grid-row</code> propriedade que tem o valor de <code>2 / 4</code> .
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
grid-column: 2 / 4;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
|
||||
.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;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -1,116 +0,0 @@
|
||||
---
|
||||
id: 5a94fe7769fb03452672e463
|
||||
title: Use Media Queries to Create Responsive Layouts
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use consultas de mídia para criar layouts responsivos
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> A CSS Grid pode ser uma maneira fácil de tornar seu site mais responsivo usando consultas de mídia para reorganizar as áreas da grade, alterar as dimensões de uma grade e reorganizar o posicionamento dos itens. Na visualização, quando a largura da janela de visualização é de 300 px ou mais, o número de colunas muda de 1 para 2. A área de publicidade ocupa a coluna da esquerda completamente. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Quando a largura da janela de visualização for de <code>400px</code> ou mais, faça a área de cabeçalho ocupar completamente a linha superior e a área de rodapé ocupará completamente a linha inferior. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Quando a <code>container</code> visualização é de <code>400px</code> ou mais, a classe de <code>container</code> deve ter uma propriedade de <code>grid-template-areas</code> na qual as áreas de cabeçalho e rodapé ocupam as linhas superior e inferior, respectivamente, e anúncio e conteúdo ocupam as colunas esquerda e direita da linha do meio.'
|
||||
testString: 'assert(code.match(/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1 {
|
||||
background: LightSkyBlue;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
background: LightSalmon;
|
||||
grid-area: advert;
|
||||
}
|
||||
|
||||
.item3 {
|
||||
background: PaleTurquoise;
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
.item4 {
|
||||
background: lightpink;
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 1.5em;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 50px auto 1fr auto;
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"advert"
|
||||
"content"
|
||||
"footer";
|
||||
}
|
||||
|
||||
@media (min-width: 300px){
|
||||
.container{
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"advert header"
|
||||
"advert content"
|
||||
"advert footer";
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 400px){
|
||||
.container{
|
||||
/* change the code below this line */
|
||||
|
||||
grid-template-areas:
|
||||
"advert header"
|
||||
"advert content"
|
||||
"advert footer";
|
||||
|
||||
/* change the code above this line */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">header</div>
|
||||
<div class="item2">advert</div>
|
||||
<div class="item3">content</div>
|
||||
<div class="item4">footer</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user