fix(curriculum): fix challenges for russian language
This commit is contained in:
Valeriy S
mrugesh
@@ -2,23 +2,28 @@
|
||||
id: 5a9036d038fddaf9a66b5d32
|
||||
title: Add Columns with grid-template-columns
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/c7NzDHv
|
||||
forumTopicId: 301117
|
||||
localeTitle: Добавление столбцов с grid-template-columns
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Просто создать грид элемент недостаточно. Вам также необходимо определить структуру грида. Чтобы добавить несколько столбцов в грид, используйте свойство <code>grid-template-columns</code> в контейнере грида как показано ниже: <blockquote> .container { <br> display: grid; <br> grid-template-columns: 50px 50px; <br> } </blockquote> Теперь в вашем гриде два столбца, каждый шириной 50 пикселей. Количество параметров, заданных для свойства <code>grid-template-columns</code> , указывает количество столбцов в сетке, а значение каждого параметра указывает ширину каждого столбца. </section>
|
||||
<section id='description'>
|
||||
Просто создать грид элемент недостаточно. Вам также необходимо определить структуру грида. Чтобы добавить несколько столбцов в грид, используйте свойство <code>grid-template-columns</code> в контейнере грида как показано ниже: <blockquote> .container { <br> display: grid; <br> grid-template-columns: 50px 50px; <br> } </blockquote> Теперь в вашем гриде два столбца, каждый шириной 50 пикселей. Количество параметров, заданных для свойства <code>grid-template-columns</code> , указывает количество столбцов в сетке, а значение каждого параметра указывает ширину каждого столбца.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Задайте грид контейнеру три столбца, каждый шириной <code>100px</code> . </section>
|
||||
<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>.");'
|
||||
- text: <code>container</code> class should have a <code>grid-template-columns</code> property with three units of <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));
|
||||
|
||||
```
|
||||
|
||||
@@ -61,14 +66,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".container {grid-template-columns: 100px 100px 100px;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a9036ee38fddaf9a66b5d37
|
||||
title: Add Gaps Faster with grid-gap
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/ca2qVtv
|
||||
forumTopicId: 301118
|
||||
localeTitle: Добавление промежутков быстрее с grid-gap
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>grid-gap</code> - это сокращенное свойство для <code>grid-row-gap</code> и <code>grid-column-gap</code> из двух предыдущих упражнений, которое более удобно в использовании. Если <code>grid-gap</code> имеет одно значение, это создаст разрыв между всеми строками и столбцами. Однако, если есть два значения, он будет использовать первое, чтобы установить разрыв между строками, и второе значение - между столбцами. </section>
|
||||
<section id='description'>
|
||||
<code>grid-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>
|
||||
<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.");'
|
||||
- text: <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.
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -63,14 +68,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".container {grid-gap: 10px 20px;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a9036e138fddaf9a66b5d33
|
||||
title: Add Rows with grid-template-rows
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cbp9Pua
|
||||
forumTopicId: 301119
|
||||
localeTitle: Добавление строк с grid-template-rows
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Грид, который вы создали в прошлом упражнении, автоматически устанавливает количество строк. Чтобы вручную задать строки, используйте свойство <code>grid-template-rows</code> точно также как вы использовали <code>grid-template-columns</code> в предыдущем упражнении. </section>
|
||||
<section id='description'>
|
||||
Грид, который вы создали в прошлом упражнении, автоматически устанавливает количество строк. Чтобы вручную задать строки, используйте свойство <code>grid-template-rows</code> точно также как вы использовали <code>grid-template-columns</code> в предыдущем упражнении.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте две строки в грид, каждая высотой <code>50px</code> . </section>
|
||||
<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>.");'
|
||||
- text: <code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -62,14 +67,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".container {grid-template-rows: 50px 50px;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a90376038fddaf9a66b5d3c
|
||||
title: Align All Items Horizontally using justify-items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cJbpECn
|
||||
forumTopicId: 301120
|
||||
localeTitle: Выравнивание всех элементов по горизонтали с использованием оправдательных элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Иногда вы хотите, чтобы все элементы в вашей сетке CSS имели одинаковое выравнивание. Вы можете использовать ранее изученные свойства и выровнять их по отдельности, или вы можете выровнять их все горизонтально, используя <code>justify-items</code> в контейнере сетки. Это свойство может принимать все те же значения, о которых вы узнали в предыдущих двух задачах, разница в том, что он переместит <b>все</b> элементы нашей сетки в желаемое выравнивание. </section>
|
||||
<section id='description'>
|
||||
Иногда вы хотите, чтобы все элементы в вашей сетке CSS имели одинаковое выравнивание. Вы можете использовать ранее изученные свойства и выровнять их по отдельности, или вы можете выровнять их все горизонтально, используя <code>justify-items</code> в контейнере сетки. Это свойство может принимать все те же значения, о которых вы узнали в предыдущих двух задачах, разница в том, что он переместит <b>все</b> элементы нашей сетки в желаемое выравнивание.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте это свойство, чтобы центрировать все наши объекты по горизонтали. </section>
|
||||
<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>.");'
|
||||
- text: <code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -65,14 +70,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".container {justify-items: center;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a94fdf869fb03452672e45b
|
||||
title: Align All Items Vertically using align-items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Выровнять все элементы по вертикали, используя элементы выравнивания'
|
||||
videoUrl: https://scrimba.com/p/pByETK/ckzPeUv
|
||||
forumTopicId: 301121
|
||||
localeTitle: Выровнять все элементы по вертикали, используя элементы выравнивания
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Использование свойства <code>align-items</code> в контейнере сетки будет устанавливать вертикальное выравнивание для всех элементов в нашей сетке. </section>
|
||||
<section id='description'>
|
||||
Использование свойства <code>align-items</code> в контейнере сетки будет устанавливать вертикальное выравнивание для всех элементов в нашей сетке.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Используйте его сейчас, чтобы переместить все элементы в конец каждой ячейки. </section>
|
||||
<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>.");'
|
||||
- text: <code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -65,14 +70,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".container {align-items: end;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a90374338fddaf9a66b5d3a
|
||||
title: Align an Item Horizontally using justify-self
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cJbpKHq
|
||||
forumTopicId: 301122
|
||||
localeTitle: Выравнивание элемента по горизонтали, используя justify-self
|
||||
---
|
||||
|
||||
## 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>
|
||||
<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> по центру ячейки. </section>
|
||||
<section id='instructions'>
|
||||
Используйте свойство <code>justify-self</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>.");'
|
||||
- text: <code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.
|
||||
testString: assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -69,14 +74,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".item2 {justify-self: center;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a90375238fddaf9a66b5d3b
|
||||
title: Align an Item Vertically using align-self
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Выровнять элемент по вертикали, используя выравнивание'
|
||||
videoUrl: https://scrimba.com/p/pByETK/cmzd4fz
|
||||
forumTopicId: 301123
|
||||
localeTitle: Выровнять элемент по вертикали, используя выравнивание
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Так же, как вы можете выровнять элемент по горизонтали, есть способ выровнять элемент по вертикали. Для этого вы используете свойство <code>align-self</code> для элемента. Это свойство принимает все те же значения, что и <code>justify-self</code> из последнего вызова. </section>
|
||||
<section id='description'>
|
||||
Так же, как вы можете выровнять элемент по горизонтали, есть способ выровнять элемент по вертикали. Для этого вы используете свойство <code>align-self</code> для элемента. Это свойство принимает все те же значения, что и <code>justify-self</code> из последнего вызова.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Выровняйте элемент с элементом <code>item3</code> вертикально в <code>end</code> . </section>
|
||||
<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>.");'
|
||||
- text: <code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.
|
||||
testString: assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -69,14 +74,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".item3 {align-self: end;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a9036ee38fddaf9a66b5d35
|
||||
title: Create a Column Gap Using grid-column-gap
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cVZ8vfD
|
||||
forumTopicId: 301124
|
||||
localeTitle: Создание промежутка у столбца с помощью grid-column-gap
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> До сих пор в гридах, которые вы создавали, столбцы были рядом друг с другом. Иногда вам нужен промежуток между столбцами. Чтобы добавить промежуток между столбцами, используйте свойство <code>grid-column-gap</code> следующим образом: <blockquote> grid-column-gap: 10px; </blockquote> Пример задаёт 10px пустого пространства между всеми нашими столбцами. </section>
|
||||
<section id='description'>
|
||||
До сих пор в гридах, которые вы создавали, столбцы были рядом друг с другом. Иногда вам нужен промежуток между столбцами. Чтобы добавить промежуток между столбцами, используйте свойство <code>grid-column-gap</code> следующим образом: <blockquote> grid-column-gap: 10px; </blockquote> Пример задаёт 10px пустого пространства между всеми нашими столбцами.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Задайте столбцам в гриде промежуток <code>20px</code> . </section>
|
||||
<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>.");'
|
||||
- text: <code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -64,14 +69,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".container {grid-column-gap: 20px;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a9036ee38fddaf9a66b5d36
|
||||
title: Create a Row Gap using grid-row-gap
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cPbJ2Cv
|
||||
forumTopicId: 301125
|
||||
localeTitle: Создание промежутка между строк с использованием grid-row-gap
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Вы можете добавить промежуток между строками грида, используя <code>grid-row-gap</code> таким же образом, что вы добавили промежуток между столбцами в предыдущем упражнении. </section>
|
||||
<section id='description'>
|
||||
Вы можете добавить промежуток между строками грида, используя <code>grid-row-gap</code> таким же образом, что вы добавили промежуток между столбцами в предыдущем упражнении.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Задайте промежуток для строк высотой <code>5px</code> . </section>
|
||||
<section id='instructions'>
|
||||
Задайте промежуток для строк высотой <code>5px</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'класс <code>container</code> должен иметь свойство <code>grid-row-gap</code> со значением 5px.'
|
||||
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>.");'
|
||||
- text: <code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -64,14 +69,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".container {grid-row-gap: 5px;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a94fe5469fb03452672e461
|
||||
title: Create Flexible Layouts Using auto-fill
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cmzdycW
|
||||
forumTopicId: 301126
|
||||
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>
|
||||
<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>
|
||||
<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>.");'
|
||||
- text: <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>.
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
@@ -82,14 +87,59 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```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(auto-fill, 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>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a94fe6269fb03452672e462
|
||||
title: Create Flexible Layouts Using auto-fit
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/c3dPph8
|
||||
forumTopicId: 301127
|
||||
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>
|
||||
<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>
|
||||
<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>.");'
|
||||
- text: <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>.
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
@@ -43,7 +48,7 @@ tests:
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
@@ -83,14 +88,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,30 @@
|
||||
id: 5a94fe8569fb03452672e464
|
||||
title: Create Grids within Grids
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/c6N78Ap
|
||||
forumTopicId: 301128
|
||||
localeTitle: Создание гридов в сетках
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Включение элемента в сетку влияет только на поведение его прямых потомков. Поэтому, превратив прямого потомка в сетку, у вас есть сетка внутри сетки. Например, задав свойства <code>display</code> и <code>grid-template-columns</code> элемента с классом <code>item3</code> , вы создаете сетку в своей сетке. </section>
|
||||
<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>
|
||||
<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>.");'
|
||||
- text: <code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.
|
||||
testString: assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi));
|
||||
- text: <code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.
|
||||
testString: assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -95,14 +100,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".item3 {grid-template-columns: auto 1fr; display: grid;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a858944d96184f06fd60d61
|
||||
title: Create Your First CSS Grid
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cqwREC4
|
||||
forumTopicId: 301129
|
||||
localeTitle: Создайте свой первый CSS Grid
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Чтобы превратить любой HTML элемент в грид контейнер установите свойство <code>display</code> в <code>grid</code> . Это даёт вам возможность использовать другие свойства, связанные с CSS Grid. <strong>Примечание</strong> <br> В CSS Grid родительский элемент называется <dfn>контейнером,</dfn> а его дочерние элементы называются <dfn>элементами</dfn> . </section>
|
||||
<section id='description'>
|
||||
Чтобы превратить любой HTML элемент в грид контейнер установите свойство <code>display</code> в <code>grid</code> . Это даёт вам возможность использовать другие свойства, связанные с CSS Grid. <strong>Примечание</strong> <br> В CSS Grid родительский элемент называется <dfn>контейнером,</dfn> а его дочерние элементы называются <dfn>элементами</dfn> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Измените свойство display у элемента div с классом <code>container</code> на <code>grid</code> . </section>
|
||||
<section id='instructions'>
|
||||
Измените свойство display у элемента 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>.");'
|
||||
- text: <code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -60,14 +65,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".container {display: grid;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: Divide the Grid Into an Area Template
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cLLpGAy
|
||||
forumTopicId: 301130
|
||||
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>
|
||||
<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>
|
||||
<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.");'
|
||||
- text: <code>container</code> class should have a <code>grid-template-areas</code> property similar to the preview but has <code>.</code> instead of the <code>advert</code> area.
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
@@ -68,14 +73,43 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```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;
|
||||
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
". 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>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a94fe4469fb03452672e460
|
||||
title: Limit Item Size Using the minmax Function
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cD97RTv
|
||||
forumTopicId: 301131
|
||||
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>
|
||||
<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>
|
||||
<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>.");'
|
||||
- text: <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>.
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
@@ -65,14 +70,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".container {grid-template-columns: repeat(3, minmax(90px, 1fr));}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a94fe1369fb03452672e45d
|
||||
title: Place Items in Grid Areas Using the grid-area Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cRrqmtV
|
||||
forumTopicId: 301132
|
||||
localeTitle: Поместите объекты в области сетки Используя свойство сетки
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> После создания шаблона областей для вашего контейнера сетки, как показано в предыдущем вызове, вы можете поместить элемент в свою настраиваемую область, указав имя, которое вы ему дали. Для этого вы используете свойство <code>grid-area</code> для элемента, подобного этому: <blockquote> .item1 {grid-area: header; } </blockquote> Это позволяет сетке знать, что вы хотите, чтобы класс <code>item1</code> находился в <code>header</code> . В этом случае элемент будет использовать всю верхнюю строку, потому что целая строка называется зоной заголовка. </section>
|
||||
<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>
|
||||
<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>.");'
|
||||
- text: <code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.
|
||||
testString: assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -72,14 +77,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".item5 {grid-area: footer;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a94fe3669fb03452672e45f
|
||||
title: Reduce Repetition Using the repeat Function
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cQvqyHR
|
||||
forumTopicId: 301133
|
||||
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>
|
||||
<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>
|
||||
<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>.");'
|
||||
- text: <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>.
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
@@ -65,14 +70,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".container {grid-template-columns: repeat(3, 1fr);}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a9036ee38fddaf9a66b5d34
|
||||
title: Use CSS Grid units to Change the Size of Columns and Rows
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cvE8phd
|
||||
forumTopicId: 301134
|
||||
localeTitle: Использование CSS Grid для изменения размера столбцов и строк
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В CSS Grid вы можете использовать абсолютные и относительные единицы измерения, такие как <code>px</code> и <code>em</code>, чтобы определить размер строк и столбцов. Также вы можете использовать следующие единицы измерения: <code>fr</code> : устанавливает столбцу или строке долю доступного пространства, <code>auto</code> : устанавливает столбцу или строке ширину или высоту по содержимому автоматически, <code>%</code> : устанавливает столбцу или строке процентную ширину его контейнера. Вот код, который генерирует вывод в предварительном просмотре: <blockquote> grid-template-columns: auto 50px 10% 2fr 1fr; </blockquote> Этот фрагмент создает пять столбцов. Ширина первого столбца задается его содержимым, второй столбец шириной 50 пикселей, третий столбец шириной 10% от ширины его контейнера и последние два столбца делят оставшееся пространство между собой в отношении 2 к 1, две доли - четвёртому столбцу и одна доля - пятому. </section>
|
||||
<section id='description'>
|
||||
В CSS Grid вы можете использовать абсолютные и относительные единицы измерения, такие как <code>px</code> и <code>em</code>, чтобы определить размер строк и столбцов. Также вы можете использовать следующие единицы измерения: <code>fr</code> : устанавливает столбцу или строке долю доступного пространства, <code>auto</code> : устанавливает столбцу или строке ширину или высоту по содержимому автоматически, <code>%</code> : устанавливает столбцу или строке процентную ширину его контейнера. Вот код, который генерирует вывод в предварительном просмотре: <blockquote> grid-template-columns: auto 50px 10% 2fr 1fr; </blockquote> Этот фрагмент создает пять столбцов. Ширина первого столбца задается его содержимым, второй столбец шириной 50 пикселей, третий столбец шириной 10% от ширины его контейнера и последние два столбца делят оставшееся пространство между собой в отношении 2 к 1, две доли - четвёртому столбцу и одна доля - пятому.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте грид с тремя столбцами, ширина которых будет следующей: 1fr, 100px и 2fr. </section>
|
||||
<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>.");'
|
||||
- text: '<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>.'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -63,14 +68,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".container {grid-template-columns: 1fr 100px 2fr;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a94fe2669fb03452672e45e
|
||||
title: Use grid-area Without Creating an Areas Template
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/c6N7VhK
|
||||
forumTopicId: 301135
|
||||
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>
|
||||
<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>
|
||||
<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> так, чтобы оно находилось между третьей и четвертой горизонтальными линиями и между первой и четвертой вертикальными линиями.
|
||||
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> должен иметь свойство <code>grid-area</code> так, чтобы оно находилось между третьей и четвертой горизонтальными линиями и между первой и четвертой вертикальными линиями.");'
|
||||
- text: <code>item5</code> class should have a <code>grid-area</code> property such that it is between the third and fourth horizontal lines and between the first and fourth vertical lines.
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
@@ -68,14 +73,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".item5 {grid-area: 3/1/4/4;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,30 @@
|
||||
id: 5a90372638fddaf9a66b5d38
|
||||
title: Use grid-column to Control Spacing
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cnzkDSr
|
||||
forumTopicId: 301136
|
||||
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>
|
||||
<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>
|
||||
<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>.");'
|
||||
- text: <code>item5</code> class should have a <code>grid-column</code> property.
|
||||
testString: assert($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-column:.*}/g));
|
||||
- text: <code>item5</code> class should have a <code>grid-column</code> property which results in the <code>div</code> with the <code>item5</code> consuming the last two columns of the grid.
|
||||
testString: assert(hasCorrectSpacing());
|
||||
|
||||
```
|
||||
|
||||
@@ -68,14 +75,60 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
### Before Tests
|
||||
<div id='html-setup'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
const hasCorrectSpacing = () => {
|
||||
const contTwoPlusThreePlusGapWidth = $('.item2').width() * 2 + 10;
|
||||
const item5Width = $('.item5').width();
|
||||
const diff = Math.abs(contTwoPlusThreePlusGapWidth - item5Width);
|
||||
/* To avoid rounding errors the largest allowed diff is set at 0.01px */
|
||||
return diff <= 0.01;
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
grid-column: 2 / 4;
|
||||
}
|
||||
|
||||
.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>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a90373638fddaf9a66b5d39
|
||||
title: Use grid-row to Control Spacing
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/c9WBLU4
|
||||
forumTopicId: 301137
|
||||
localeTitle: Использование grid-row для управления пространством
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Конечно, вы можете создать элементы, занимающие несколько строк, также как вы делали это со столбцами. Для этого необходимо определить горизонтальные линии, в которых вы хотите чтобы элемент начинался и заканчивался при помощи свойства <code>grid-row</code> на элементе грида. </section>
|
||||
<section id='description'>
|
||||
Конечно, вы можете создать элементы, занимающие несколько строк, также как вы делали это со столбцами. Для этого необходимо определить горизонтальные линии, в которых вы хотите чтобы элемент начинался и заканчивался при помощи свойства <code>grid-row</code> на элементе грида.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Создайте элемент с классом <code>item5</code> , который занимает две последние строки грида. </section>
|
||||
<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>.");'
|
||||
- text: <code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.
|
||||
testString: assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
@@ -69,14 +74,13 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
var code = ".item5 {grid-row: 2 / 4;}"
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 5a94fe7769fb03452672e463
|
||||
title: Use Media Queries to Create Responsive Layouts
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pByETK/cMbqeHk
|
||||
forumTopicId: 301138
|
||||
localeTitle: Использование медиа-запросов для создания адаптивных макетов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS Grid может быть простым способом сделать ваш сайт более отзывчивым, используя медиа-запросы, чтобы изменить области сетки, изменить размеры сетки и изменить порядок размещения элементов. В предварительном просмотре, когда ширина области просмотра составляет 300 пикселей или более, количество столбцов изменяется от 1 до 2. Область рекламы затем занимает левый столбец полностью. </section>
|
||||
<section id='description'>
|
||||
CSS Grid может быть простым способом сделать ваш сайт более отзывчивым, используя медиа-запросы, чтобы изменить области сетки, изменить размеры сетки и изменить порядок размещения элементов. В предварительном просмотре, когда ширина области просмотра составляет 300 пикселей или более, количество столбцов изменяется от 1 до 2. Область рекламы затем занимает левый столбец полностью.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Когда ширина области просмотра составляет <code>400px</code> или более, сделайте область заголовка <code>400px</code> верхней строкой полностью, а нижняя <code>400px</code> полностью занимает нижнюю строку. </section>
|
||||
<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.");'
|
||||
- text: 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 header and footer areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.
|
||||
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));
|
||||
|
||||
```
|
||||
|
||||
@@ -103,14 +108,80 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```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:
|
||||
"header header"
|
||||
"advert content"
|
||||
"footer 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>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user