Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 5a9036d038fddaf9a66b5d32
|
||||
title: Add Columns with grid-template-columns
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Добавить столбцы с столбцами таблицы-шаблона
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Простое создание элемента сетки не слишком далеко. Вам также необходимо определить структуру сетки. Чтобы добавить некоторые столбцы в сетку, используйте свойство <code>grid-template-columns</code> в контейнере сетки, как показано ниже: <blockquote> .container { <br> отображение: сетка; <br> grid-template-columns: 50px 50px; <br> } </blockquote> Это даст вашей сетке два столбца шириной 50 пикселей. Количество параметров, заданных для свойства <code>grid-template-columns</code> указывает количество столбцов в сетке, а значение каждого параметра указывает ширину каждого столбца. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Дайте контейнеру сетки три столбца шириной по <code>100px</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: класс <code>container</code> должен иметь свойство <code>grid-template-columns</code> с тремя единицами <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>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d37
|
||||
title: Add Gaps Faster with grid-gap
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Добавить пробелы быстрее с разрывом сетки
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>grid-gap</code> - это сокращенное свойство для <code>grid-row-gap</code> <code>grid-column-gap</code> и <code>grid-row-gap</code> <code>grid-column-gap</code> из двух предыдущих задач, которые более удобны в использовании. Если <code>grid-gap</code> имеет одно значение, это создаст разрыв между всеми строками и столбцами. Однако, если есть два значения, он будет использовать первый, чтобы установить разрыв между строками и вторым значением для столбцов. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте <code>grid-gap</code> чтобы ввести <code>10px</code> зазор между строками и <code>20px</code> разрыв между столбцами. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: класс <code>container</code> должен иметь свойство <code>grid-gap</code> которое вводит разрыв <code>10px</code> между строками и <code>20px</code> разрыв между столбцами.
|
||||
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>
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 5a9036e138fddaf9a66b5d33
|
||||
title: Add Rows with grid-template-rows
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Добавить строки с строками-сетками-строками
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Сетка, созданная в последней задаче, автоматически установит количество строк. Чтобы вручную отредактировать строки, используйте свойство <code>grid-template-rows</code> же, как в предыдущем вызове были использованы <code>grid-template-columns</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте две строки в сетку, каждая из которых имеет <code>50px</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: класс <code>container</code> должен иметь свойство <code>grid-template-rows</code> с двумя единицами <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>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 5a90376038fddaf9a66b5d3c
|
||||
title: Align All Items Horizontally using justify-items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Выравнивание всех элементов по горизонтали с использованием оправдательных элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Иногда вы хотите, чтобы все элементы в вашей сетке CSS имели одинаковое выравнивание. Вы можете использовать ранее изученные свойства и выровнять их по отдельности, или вы можете выровнять их все горизонтально, используя <code>justify-items</code> в контейнере сетки. Это свойство может принимать все те же значения, о которых вы узнали в предыдущих двух задачах, разница в том, что он переместит <b>все</b> элементы нашей сетки в желаемое выравнивание. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте это свойство, чтобы центрировать все наши объекты по горизонтали. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: класс <code>container</code> должен иметь свойство <code>justify-items</code> которое имеет значение <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>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 5a94fdf869fb03452672e45b
|
||||
title: Align All Items Vertically using align-items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Выровнять все элементы по вертикали, используя элементы выравнивания'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Использование свойства <code>align-items</code> в контейнере сетки будет устанавливать вертикальное выравнивание для всех элементов в нашей сетке. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте его сейчас, чтобы переместить все элементы в конец каждой ячейки. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: класс <code>container</code> должен иметь свойство <code>align-items</code> которое имеет значение <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>
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 5a90374338fddaf9a66b5d3a
|
||||
title: Align an Item Horizontally using justify-self
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Выровнять элемент по горизонтали, используя оправдание'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В CSS Grid содержимое каждого элемента находится в ящике, который называется <dfn>ячейкой</dfn> . Вы можете выравнивать позицию содержимого внутри своей ячейки по горизонтали, используя свойство <code>justify-self</code> для элемента сетки. По умолчанию это свойство имеет значение <code>stretch</code> , которое сделает содержимое заполнением всей ширины ячейки. Это свойство CSS Grid принимает и другие значения: <code>start</code> : выравнивает содержимое слева от ячейки, в <code>center</code> : выравнивает содержимое в центре ячейки, <code>end</code> : выравнивает содержимое справа от ячейки. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте свойство <code>justify-self</code> для <code>item2</code> элемента с помощью <code>item2</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: класс <code>item2</code> должен иметь свойство <code>justify-self</code> которое имеет значение <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>
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 5a90375238fddaf9a66b5d3b
|
||||
title: Align an Item Vertically using align-self
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Выровнять элемент по вертикали, используя выравнивание'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Так же, как вы можете выровнять элемент по горизонтали, есть способ выровнять элемент по вертикали. Для этого вы используете свойство <code>align-self</code> для элемента. Это свойство принимает все те же значения, что и <code>justify-self</code> из последнего вызова. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Выровняйте элемент с элементом <code>item3</code> вертикально в <code>end</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: класс <code>item3</code> должен иметь свойство <code>align-self</code> которое имеет значение <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>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d35
|
||||
title: Create a Column Gap Using grid-column-gap
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Создание разрыва столбца Использование разрыва сетки-столбца
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> До сих пор в сетках, которые вы создали, столбцы были тесно связаны друг с другом. Иногда вам нужен промежуток между колоннами. Чтобы добавить промежуток между столбцами, используйте свойство <code>grid-column-gap</code> следующим образом: <blockquote> сетка-столбик-зазор: 10 пикселей; </blockquote> Это создает 10px пустого пространства между всеми нашими столбцами. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Дайте столбцам в сетке пробел <code>20px</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: класс <code>container</code> должен иметь свойство <code>grid-column-gap</code> которое имеет значение <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>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d36
|
||||
title: Create a Row Gap using grid-row-gap
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Создание пробела в строке с использованием разрыва сетки
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете добавить пробел между строками сетки, используя <code>grid-row-gap</code> таким же образом, что вы добавили промежуток между столбцами в предыдущем вызове. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте пробел для строк высотой 5 <code>5px</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
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>
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 5a94fe5469fb03452672e461
|
||||
title: Create Flexible Layouts Using auto-fill
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Создание гибких макетов с использованием автозаполнения
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Функция повтора поставляется с опцией, называемой <dfn>автозаполнением</dfn> . Это позволяет автоматически вставлять столько строк или столбцов требуемого размера, сколько возможно, в зависимости от размера контейнера. Вы можете создавать гибкие макеты при объединении <code>auto-fill</code> с <code>minmax</code> . В предварительном просмотре <code>grid-template-columns</code> установлены на <blockquote> repeat (автозаполнение, minmax (60px, 1fr)); </blockquote> Когда контейнер меняет размер, эта настройка сохраняет вставки столбцов 60px и растягивает их до тех пор, пока не сможет вставить другой. <strong>Заметка</strong> <br> Если ваш контейнер не может поместить все ваши предметы в одну строку, он переместит их на новый. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> В первой сетке используйте <code>auto-fill</code> с <code>repeat</code> чтобы заполнить сетку столбцами, которые имеют минимальную ширину <code>60px</code> и максимум <code>1fr</code> . Затем измените размер предварительного просмотра, чтобы увидеть автоматическое заполнение в действии. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'класс <code>container</code> должен иметь свойство <code>grid-template-columns</code> с <code>repeat</code> и <code>auto-fill</code> , которое заполняет сетку столбцами с минимальной шириной <code>60px</code> и максимум <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>
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
id: 5a94fe6269fb03452672e462
|
||||
title: Create Flexible Layouts Using auto-fit
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Создание гибких макетов с использованием автоматической подгонки
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>auto-fit</code> работает почти идентично <code>auto-fill</code> . Единственное различие заключается в том, что, когда размер контейнера превышает размер всех объединенных элементов, <code>auto-fill</code> сохраняет вставки пустых строк или столбцов и толкает ваши элементы в сторону, в то время как <code>auto-fit</code> сворачивает эти пустые строки или столбцы и растягивает ваши элементы до установите размер контейнера. <strong>Заметка</strong> <br> Если ваш контейнер не может поместить все ваши предметы в одну строку, он переместит их на новый. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Во второй сетке используйте <code>auto-fit</code> с <code>repeat</code> чтобы заполнить сетку столбцами, которые имеют минимальную ширину <code>60px</code> и максимум <code>1fr</code> . Затем измените размер предварительного просмотра, чтобы увидеть разницу. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Класс <code>container2</code> должен иметь свойство <code>grid-template-columns</code> с <code>repeat</code> и <code>auto-fit</code> , которое заполняет сетку столбцами с минимальной шириной <code>60px</code> и максимальной длиной <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>
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 5a94fe8569fb03452672e464
|
||||
title: Create Grids within Grids
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Создание гридов в сетках
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Включение элемента в сетку влияет только на поведение его прямых потомков. Поэтому, превратив прямого потомка в сетку, у вас есть сетка внутри сетки. Например, задав свойства <code>display</code> и <code>grid-template-columns</code> элемента с классом <code>item3</code> , вы создаете сетку в своей сетке. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Поверните элемент с классом <code>item3</code> в сетку с двумя столбцами с шириной <code>auto</code> и <code>1fr</code> используя <code>1fr</code> <code>display</code> и <code>grid-template-columns</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: класс <code>item3</code> должен иметь свойство <code>grid-template-columns</code> с <code>auto</code> и <code>1fr</code> как значения.
|
||||
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> должен иметь свойство <code>display</code> со значением <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>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 5a858944d96184f06fd60d61
|
||||
title: Create Your First CSS Grid
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Создайте свою первую сетку CSS
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Поверните любой элемент HTML в контейнер сетки, установив его свойство <code>display</code> в <code>grid</code> . Это дает вам возможность использовать все другие свойства, связанные с сеткой CSS. <strong>Заметка</strong> <br> В CSS Grid родительский элемент называется <dfn>контейнером,</dfn> а его дочерние элементы называются <dfn>элементами</dfn> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените отображение div с классом <code>container</code> на <code>grid</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: класс <code>container</code> должен иметь свойство <code>display</code> со значением <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>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: Divide the Grid Into an Area Template
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Разделите сетку в шаблон области
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете группировать ячейки вашей сетки вместе в <dfn>область</dfn> и присваивать области свое имя. Сделайте это, используя области <code>grid-template-areas</code> в контейнере следующим образом: <blockquote> Сетка-шаблон-направления: <br> "заголовок заголовка заголовка" <br> «контент содержания рекламы» <br> «нижний колонтитул нижнего колонтитула»; </blockquote> Приведенный выше код объединяет три верхние ячейки вместе в <code>header</code> , нижние три ячейки в область нижнего <code>footer</code> , и он делает две области в средней строке; <code>advert</code> и <code>content</code> . <strong>Заметка</strong> <br> Каждое слово в коде представляет собой ячейку, и каждая пара кавычек представляет собой строку. В дополнение к пользовательским ярлыкам вы можете использовать период ( <code>.</code> ) Для обозначения пустой ячейки в сетке. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Поместите шаблон области так, чтобы ячейка, помеченная <code>advert</code> стала пустой ячейкой. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'класс <code>container</code> должен иметь свойство <code>grid-template-areas</code> подобное представлению, но имеет <code>.</code> вместо области <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>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 5a94fe4469fb03452672e460
|
||||
title: Limit Item Size Using the minmax Function
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Предельный размер элемента Использование функции minmax
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Существует еще одна встроенная функция для использования с <code>grid-template-columns</code> и <code>grid-template-rows</code> называемыми <code>minmax</code> . Он используется для ограничения размера элементов, когда контейнер сетки меняет размер. Для этого вам нужно указать допустимый диапазон размеров для вашего товара. Вот пример: <blockquote> grid-template-columns: 100px minmax (50px, 200px); </blockquote> В приведенном выше коде <code>grid-template-columns</code> установлены для создания двух столбцов; первая ширина 100px, а вторая имеет минимальную ширину 50px и максимальную ширину 200px. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используя <code>minmax</code> функции, замените <code>1fr</code> в <code>repeat</code> функции с размером столбца , который имеет минимальную ширину <code>90px</code> и максимальную ширину <code>1fr</code> , и изменить размер панели предварительного просмотра , чтобы увидеть эффект. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code> класс должен иметь <code>grid-template-columns</code> свойство, которое установлено повторить 3 колонки с минимальной шириной <code>90px</code> и максимальной шириной <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>
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 5a94fe1369fb03452672e45d
|
||||
title: Place Items in Grid Areas Using the grid-area Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Поместите объекты в области сетки Используя свойство сетки
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> После создания шаблона областей для вашего контейнера сетки, как показано в предыдущем вызове, вы можете поместить элемент в свою настраиваемую область, указав имя, которое вы ему дали. Для этого вы используете свойство <code>grid-area</code> для элемента, подобного этому: <blockquote> .item1 {grid-area: header; } </blockquote> Это позволяет сетке знать, что вы хотите, чтобы класс <code>item1</code> находился в <code>header</code> . В этом случае элемент будет использовать всю верхнюю строку, потому что целая строка называется зоной заголовка. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Поместите элемент с классом <code>item5</code> в область <code>item5</code> <code>footer</code> используя свойство <code>grid-area</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Класс <code>item5</code> должен иметь свойство <code>grid-area</code> которое имеет значение <code>item5</code> <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>
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 5a94fe3669fb03452672e45f
|
||||
title: Reduce Repetition Using the repeat Function
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Уменьшить повторение с помощью функции повтора
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Когда вы использовали <code>grid-template-columns</code> и <code>grid-template-rows</code> для определения структуры сетки, вы ввели значение для каждой строки или столбца, который вы создали. Допустим, вам нужна сетка со 100 рядами одинаковой высоты. Внести 100 значений по отдельности не очень удобно. К счастью, есть лучший способ - с помощью функции <code>repeat</code> указать количество раз, когда вы хотите <code>repeat</code> свой столбец или строку, а затем запятую и значение, которое вы хотите повторить. Вот пример, который создавал бы сетку из 100 строк, каждая строка была бы высотой 50 пикселей. <blockquote> grid-template-rows: repeat (100, 50px); </blockquote> Вы также можете повторить несколько значений с помощью функции повтора и вставить функцию среди других значений при определении структуры сетки. Вот что я имею в виду: <blockquote> grid-template-columns: repeat (2, 1fr 50px) 20px; </blockquote> Это означает: <blockquote> grid-template-columns: 1fr 50px 1fr 50px 20px; </blockquote> <strong>Заметка</strong> <br> <code>1fr 50px</code> повторяется дважды, затем 20px. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте <code>repeat</code> чтобы удалить повторение из свойства <code>grid-template-columns</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'класс <code>container</code> должен иметь свойство <code>grid-template-columns</code> , которое настроено на повторение 3 столбцов с шириной <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>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d34
|
||||
title: Use CSS Grid units to Change the Size of Columns and Rows
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте элементы сетки CSS для изменения размера столбцов и строк.
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете использовать абсолютные и относительные единицы, такие как <code>px</code> и <code>em</code> в CSS Grid, чтобы определить размер строк и столбцов. Вы также можете использовать их: <code>fr</code> : устанавливает столбец или строку на долю доступного пространства, <code>auto</code> : <code>auto</code> устанавливает столбец или строку в ширину или высоту своего содержимого, <code>%</code> : настраивает столбец или строку на процентную ширину его контейнера. Вот код, который генерирует вывод в предварительном просмотре: <blockquote> grid-template-columns: auto 50px 10% 2fr 1fr; </blockquote> Этот фрагмент создает пять столбцов. Первый столбец такой же широкий, как и его содержимое, второй столбец - 50 пикселей, третий столбец - 10% его контейнера и для последних двух столбцов; оставшееся пространство делится на три секции, два - на четвертый столбец, а второй - на пятый. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте сетку с тремя столбцами, ширина которых будет следующей: 1fr, 100px и 2fr. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'класс <code>container</code> должен иметь свойство <code>grid-template-columns</code> которое имеет три столбца со следующими ширинами: <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>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 5a94fe2669fb03452672e45e
|
||||
title: Use grid-area Without Creating an Areas Template
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Использование сетки без создания шаблона областей
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Свойство <code>grid-area</code> вы узнали в последней задаче, можно использовать по-другому. Если в вашей сетке нет шаблона областей для ссылки, вы можете создать область «на лету» для элемента, который будет размещен следующим образом: <blockquote> item1 {сетка: 1/1/2/4; } </blockquote> Это использует номера строк, которые вы узнали ранее, чтобы определить, где будет область для этого элемента. Цифры в приведенном выше примере представляют эти значения: <blockquote> grid-area: горизонтальная линия для начала / вертикальной линии для начала / горизонтальной линии до конца на / вертикальной линии до конца; </blockquote> Таким образом, элемент в примере будет потреблять строки между строками 1 и 2 и столбцы между строками 1 и 4. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используя свойство <code>grid-area</code> , поместите элемент с классом <code>item5</code> между третьей и четвертой горизонтальными линиями и между первой и четвертой вертикальными линиями. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Класс <code>item5</code> должен иметь свойство <code>grid-area</code> которое имеет значение <code>3/1/4/4</code> .
|
||||
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), "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/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>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 5a90372638fddaf9a66b5d38
|
||||
title: Use grid-column to Control Spacing
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Использовать grid-column для управления интервалом
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> До этого момента все свойства, которые обсуждались, предназначены для контейнеров с сеткой. Свойство <code>grid-column</code> является первым для самих элементов сетки. Гипотетические горизонтальные и вертикальные линии, которые создают сетку, называются <dfn>линиями</dfn> . Эти строки нумеруются начиная с 1 в верхнем левом углу сетки и перемещаются вправо для столбцов и вниз для строк, считая вверх. Вот как выглядят линии для сетки 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;"> строки столбцов </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;"> строки строк </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> Чтобы контролировать количество столбцов, которые будет потребляться элементом, вы можете использовать свойство <code>grid-column</code> в сочетании с номерами строк, которые хотите, чтобы элемент начал и остановился. Вот пример: <blockquote> grid-column: 1/3; </blockquote> Это приведет к тому, что элемент начнется с первой вертикальной линии сетки слева и пролетает до третьей линии сетки, потребляя два столбца. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Сделать элемент с классом <code>item5</code> использовать последние два столбца сетки. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item5</code> класс должен иметь <code>grid-column</code> свойство , которое имеет значение <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>
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 5a90373638fddaf9a66b5d39
|
||||
title: Use grid-row to Control Spacing
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Использовать сетку-строку для управления интервалом
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Разумеется, вы можете сделать элементы потребляющими несколько строк, как вы можете, с помощью столбцов. Необходимо определить горизонтальные линии , которые вы хотите пункт для запуска и остановки при помощи <code>grid-row</code> свойство на элементе сетки. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Сделайте элемент с классом <code>item5</code> двумя последними. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item5</code> класс должен иметь <code>grid-row</code> свойство , которое имеет значение <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>
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 5a94fe7769fb03452672e463
|
||||
title: Use Media Queries to Create Responsive Layouts
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Использование медиа-запросов для создания адаптивных макетов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS Grid может быть простым способом сделать ваш сайт более отзывчивым, используя медиа-запросы, чтобы изменить области сетки, изменить размеры сетки и изменить порядок размещения элементов. В предварительном просмотре, когда ширина области просмотра составляет 300 пикселей или более, количество столбцов изменяется от 1 до 2. Область рекламы затем занимает левый столбец полностью. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Когда ширина области просмотра составляет <code>400px</code> или более, сделайте область заголовка <code>400px</code> верхней строкой полностью, а нижняя <code>400px</code> полностью занимает нижнюю строку. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Когда область просмотра составляет <code>400px</code> или более, класс <code>container</code> должен иметь свойство <code>grid-template-areas</code> в котором области нижнего колонтитула и заголовка занимают верхнюю и нижнюю строки соответственно, а объявление и контент занимают левый и правый столбцы средней строки.'
|
||||
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