chore(i18n,curriculum): processed translations - new ukrainian (#44447)
This commit is contained in:
camperbot
GitHub
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 5a9036d038fddaf9a66b5d32
|
||||
title: Додавання стовпців за допомогою шаблонів сітки
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv'
|
||||
forumTopicId: 301117
|
||||
dashedName: add-columns-with-grid-template-columns
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Просто створивши таблицю ви не отримаєте значних результатів в роботі. Вам також потрібно визначити структуру таблиці. Для того, щоб додати кілька стовпців у таблицю, скористайтесь властивістю `grid-template-columns` на контейнер сітки так, як показано нижче:
|
||||
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 50px;
|
||||
}
|
||||
```
|
||||
|
||||
Так ви додасте до своєї таблиці два стовпці, які будуть шириною у 50 пікселів. Кількість параметрів, заданих у властивості `grid-template-columns`, вказує на кількість стовпців у таблиці, і значення кожного параметра позначає ширину кожного стовпця.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Надайте grid-контейнеру три стовпці, які матимуть в ширину по `100px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container` повинен містити властивість `grid-template-columns` з трьома одиницями зі значенням `100px`.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.container')?.gridTemplateColumns === '100px 100px 100px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-template-columns: 100px 100px 100px;}</style>
|
||||
```
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d37
|
||||
title: Як швидше додавати розриви за допомогою властивості grid-gap
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv'
|
||||
forumTopicId: 301118
|
||||
dashedName: add-gaps-faster-with-grid-gap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`grid-gap` - це скорочена властивість для `grid-row-gap` і `grid-column-gap` з попередніх двох завдань, яка зручніша у використанні. Якщо `grid-gap` має одне значення, то він створить розрив між усіма рядками і стовпцями. Однак, якщо є два значення, він використовуватиме перше для встановлення розриву між рядками, а друге значення - для стовпців.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Скористайтесь властивістю `grid-gap` щоб створити розрив `10px` між рядками і розрив `20px` між колонками.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container` повинен містити властивість `grid-gap`, яка утворить розрив `10px` між рядками і розрив `20px` між стовпцями.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-gap: 10px 20px;}</style>
|
||||
```
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 5a9036e138fddaf9a66b5d33
|
||||
title: Додавання рядків за допомогою властивості grid-template-rows
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua'
|
||||
forumTopicId: 301119
|
||||
dashedName: add-rows-with-grid-template-rows
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Створена в останньому завданні таблиця автоматично встановить кількість рядків. Щоб налаштувати рядки вручну, використовуйте властивість `grid-template-rows` так само, як ви використовували `grid-template-columns` у попередньому завданні.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте два рядки з висотою `50px` кожен до таблиці.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container` повинен містити властивість `grid-template-rows` з двома одиницями зі значенням `50px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-template-rows: 50px 50px;}</style>
|
||||
```
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 5a90376038fddaf9a66b5d3c
|
||||
title: Вирівняти всі елементи горизонтально за допомогою властивості justify-items
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn'
|
||||
forumTopicId: 301120
|
||||
dashedName: align-all-items-horizontally-using-justify-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Іноді ви хочете, щоб всі елементи у вашій таблиці CSS були одинаково вирівняні. Ви можете використати раніше вивчені властивості та вирівняти їх окремо, або ви можете вирівняти горизонтально всіх їх одночасно, використовуючи `justify-items` у вашому grid-контейнері. Ця властивість може прийняти всі ті ж значення, про які ви дізналися у попередніх двох завданнях, різниця в тому, що вона буде переміщати **всі** елементи в нашій таблиці до потрібного вирівнювання.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуйте цю властивість, щоб розмістити по центру всі наші елементи горизонтально.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container` повинен містити властивість `justify-items` зі значенням `center`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {justify-items: center;}</style>
|
||||
```
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 5a94fdf869fb03452672e45b
|
||||
title: Вирівняти всі елементи вертикально за допомогою властивості align-items
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv'
|
||||
forumTopicId: 301121
|
||||
dashedName: align-all-items-vertically-using-align-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Використовуючи властивість `align-items` для grid-контейнера можна задати вертикальне вирівнювання для всіх елементів нашої таблиці.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Скористайтесь нею зараз, щоб перемістити всі елементи в кінець кожної клітинки.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container` повинен містити властивість `align-items` зі значенням `end`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {align-items: end;}</style>
|
||||
```
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 5a90374338fddaf9a66b5d3a
|
||||
title: Вирівняти елемент горизонтально за допомогою властивості justify-self
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq'
|
||||
forumTopicId: 301122
|
||||
dashedName: align-an-item-horizontally-using-justify-self
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У CSS Grid вміст кожного елементу розміщений у рамці, яка називається <dfn>cell</dfn>. Ви можете вирівняти розміщення у межах клітини горизонтально, використовуючи властивість `justify-self` для елемента таблиці. За замовчуванням, цей параметр має значення `stretch`, і таким чином вміст заповнює всю ширину клітини. Ця властивість CSS Grid також приймає інші значення:
|
||||
|
||||
`start`: вирівнює вміст по лівому краю клітини,
|
||||
|
||||
`center`: вирівнює вміст по центру клітини,
|
||||
|
||||
`end`: вирівнює вміст по правому краю клітини.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використайте властивість `justify-self` щоб розмістити елемент по центру з класом `item2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `item2` повинен містити властивість `justify-self` зі значенням `center`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background: LightSkyBlue;}
|
||||
|
||||
.item2 {
|
||||
background: LightSalmon;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.item2 {justify-self: center;}</style>
|
||||
```
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 5a90375238fddaf9a66b5d3b
|
||||
title: Вирівняти елемент вертикально за допомогою властивості align-self
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz'
|
||||
forumTopicId: 301123
|
||||
dashedName: align-an-item-vertically-using-align-self
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете вирівняти елемент як горизонтально, так і вертикально. Щоб зробити це, застосуйте властивість `align-self` на елемент. Ця властивість приймає всі ті ж значення, що і `justify-self` з попереднього завдання.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Вирівняйте елемент класу `item3` вертикально в `end`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `item3` повинен містити властивість `align-self` зі значенням `end`.
|
||||
|
||||
```js
|
||||
assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
|
||||
.item3 {
|
||||
background: PaleTurquoise;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.item3 {align-self: end;}</style>
|
||||
```
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d35
|
||||
title: Створення розриву між стовпцями, використовуючи властивість grid-column-gap
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD'
|
||||
forumTopicId: 301124
|
||||
dashedName: create-a-column-gap-using-grid-column-gap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У таблицях, що ви уже створили, усі колонки були приєднані одна до одної. Але іноді вам потрібен проміжок між колонками. Щоб додати проміжок між колонками, використовуйте властивість `grid-column-gap` як показано тут:
|
||||
|
||||
```css
|
||||
grid-column-gap: 10px;
|
||||
```
|
||||
|
||||
Таким чином, це створює 10 пікселів пустого простору між усіма нашими колонками.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Надайте колонкам у таблиці проміжок шириною `20px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container` повинен містити властивість `grid-column-gap` зі значенням `20px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-column-gap: 20px;}</style>
|
||||
```
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d36
|
||||
title: Створення розриву між рядками, використовуючи властивість grid-row-gap
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv'
|
||||
forumTopicId: 301125
|
||||
dashedName: create-a-row-gap-using-grid-row-gap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете додати розрив між рядками таблиці за допомогою властивості `grid-row-gap` так само, як ви додали розрив між колонками у попередньому завданні.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть проміжок між рядками з висотою `5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container` повинен містити властивість `grid-row-gap` зі значенням `5px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-row-gap: 5px;}</style>
|
||||
```
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 5a94fe5469fb03452672e461
|
||||
title: Створіть гнучкі макети, використовуючи автозаповнення
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
|
||||
forumTopicId: 301126
|
||||
dashedName: create-flexible-layouts-using-auto-fill
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Повторна функція використовується разом із опцією під назвою <dfn>auto-fill</dfn>. Це дозволяє вам автоматично вставляти стільки рядків або колонок бажаного розміру, скільки можливо, в залежності від розміру контейнера. Ви можете створити гнучкі макети поєднуючи `auto-fill` з `minmax`, на зразок цього:
|
||||
|
||||
```css
|
||||
repeat(auto-fill, minmax(60px, 1fr));
|
||||
```
|
||||
|
||||
Коли контейнер змінює розмір, дане налаштування продовжує додавати 60-піксельні колонки і розтягувати їх до тих пір доки не зможе вставити ще одну. **Примітка:** якщо ваш контейнер не може вмістити усі ваші об'єкти в один рядок, він перемістить їх до нового рядка.
|
||||
|
||||
# --instructions--
|
||||
|
||||
У першій сітці, використовуйте `auto-fill` з `repeat` для заповнення сітки колонками, які мають мінімальну ширину `60px` і максимальну `1fr`. Тоді змініть розмір попереднього перегляду, щоб побачити цю зміну в дії.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container` повинен містити властивість `grid-template-columns` з `repeat` та `auto-fill` яка заповнить сітку колонками із мінімальною шириною `60px` та максимальною `1fr`.
|
||||
|
||||
```js
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
grid-template-columns: repeat(3, minmax(60px, 1fr));
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
@@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 5a94fe6269fb03452672e462
|
||||
title: Створіть гнучкі макети, використовуючи автоматичний підбір
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
|
||||
forumTopicId: 301127
|
||||
dashedName: create-flexible-layouts-using-auto-fit
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`auto-fit` функціонує майже ідентично з `auto-fill`. Єдина відмінність полягає в тому, що коли розмір контейнера перевищує розмір усіх поєднаних об'єктів `auto-fill` продовжує додавати пусті рядки та колонки та відсуває об'єкти на бік, в той час як `auto-fit` стискає ці порожні рядки та колонки та розтягує ваші об'єкти до розмірів контейнера.
|
||||
|
||||
**Примітка:** якщо ваш контейнер не може вмістити усі ваші об'єкти в один рядок, він перемістить їх до нового рядка.
|
||||
|
||||
# --instructions--
|
||||
|
||||
У першій сітці, використовуйте `auto-fit` з `repeat` для заповнення сітки колонками, які мають мінімальну ширину `60px` і максимальну `1fr`. Тоді змініть розмір попереднього перегляду, щоб побачити цю зміну.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container2` повинен містити властивість `grid-template-columns` з `repeat` та `auto-fit` яка заповнить сітку колонками із мінімальною шириною `60px` та максимальною `1fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container2\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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
grid-template-columns: repeat(3, minmax(60px, 1fr));
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}</style>
|
||||
```
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 5a94fe8569fb03452672e464
|
||||
title: Створюйте таблиці в таблицях
|
||||
challengeType: 0
|
||||
forumTopicId: 301128
|
||||
dashedName: create-grids-within-grids
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Перетворення елемента в сітку впливає лише на поводження прямих дочірніх об'єктів. Отже, перетворюючи прямий дочірній елемент в сітку, ви отримуєте таблицю в таблиці.
|
||||
|
||||
Наприклад, якщо задати властивості елемента `display` і `grid-template-columns` з класом `item3`, то всередині вашої таблиці буде ще одна.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Перетворіть елемент з класом `item3` на таблицю з двома колонками шириною `auto` та `1fr`, використовуючи `display` та `grid-template-columns`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `item3` має містити властивість `grid-template-columns` зі значеннями `auto` та `1fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Клас `item3` повинен містити властивість `display` зі значенням `grid`.
|
||||
|
||||
```js
|
||||
assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.item3 {grid-template-columns: auto 1fr; display: grid;}</style>
|
||||
```
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 5a858944d96184f06fd60d61
|
||||
title: Створіть свою першу CSS-сітку
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
|
||||
forumTopicId: 301129
|
||||
dashedName: create-your-first-css-grid
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Перетворіть будь-який елемент HTML у grid-контейнер, задавши властивість `display` для `grid`. Це дозволить вам використати усі властивості, що пов'язані з CSS Grid.
|
||||
|
||||
**Примітка:** у CSS Grid, батьківський елемент називається <dfn>container</dfn> а його дочірні елементи — <dfn>items</dfn>.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Змініть відображення div за допомогою класу `container` на `grid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container` повинен містити властивість `display` зі значенням `grid`.
|
||||
|
||||
```js
|
||||
assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {display: grid;}</style>
|
||||
```
|
||||
@@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: Поділіть сітку на шаблон зони
|
||||
challengeType: 0
|
||||
forumTopicId: 301130
|
||||
dashedName: divide-the-grid-into-an-area-template
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете групувати комірки вашої сітки у <dfn>area</dfn> та надавати цій області ім'я користувача. Це можливо зробити, використавши `grid-template-areas` на такому контейнері:
|
||||
|
||||
```css
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"advert footer footer";
|
||||
```
|
||||
|
||||
Наведений нижче код групує комірки сітки в чотири області; `header`, `advert`, `content` та `footer`. Кожне слово є клітинкою і всі пари лапок означають рядок.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Змініть шаблон таким чином, щоб `footer` охоплював всю нижню частину. Зараз визначення областей не матиме жодних візуальних ефектів. Пізніше, ви змусите вміст заповнити всю область, щоб побачити як це працює.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` клас повинен мати `grid-template-areas` властивість схожу на приклад, але щоб площа `footer` охоплювала весь нижній рядок.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(
|
||||
/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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:
|
||||
/* Only change code below this line */
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"advert footer footer";
|
||||
/* Only 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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"
|
||||
"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>
|
||||
```
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5a94fe4469fb03452672e460
|
||||
title: Обмежити розмір предмета, використовуючи мінімальну функцію
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv'
|
||||
forumTopicId: 301131
|
||||
dashedName: limit-item-size-using-the-minmax-function
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Існує ще одна вбудована функція для використання з `grid-template-columns` and `grid-template-rows` під назвою `minmax`. Вона використовується для обмеження розміру предметів, коли змінюється розмір сітки контейнера. Для цього необхідно визначити допустимий діапазон розміру вашого об'єкта. Наприклад:
|
||||
|
||||
```css
|
||||
grid-template-columns: 100px minmax(50px, 200px);
|
||||
```
|
||||
|
||||
У наведеному вище коді `grid-template-columns` встановлений для створення двох колонок; перша колонка шириною 100 пікселів та друга - із мінімальною шириною 50 пікселів та максимальною шириною 200 пікселів.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуючи функцію `minmax`, замініть `1fr` у функції `repeat` на розмір колонки із мінімальною шириною `90px` і максимальною шириною `1fr`, та змініть розмір панелі попереднього перегляду, щоб побачити результат.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container` повинен мати властивість `grid-template-columns`, яка повинна повторювати 3 колонки із мінімальною шириною `90px` та максимальною шириною `1fr`.
|
||||
|
||||
```js
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-template-columns: repeat(3, minmax(90px, 1fr));}</style>
|
||||
```
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 5a94fe1369fb03452672e45d
|
||||
title: Розмістіть елементи в області сітки, використовуючи властивості області сітки
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV'
|
||||
forumTopicId: 301132
|
||||
dashedName: place-items-in-grid-areas-using-the-grid-area-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Після створення шаблону області для контейнера сітки, як показано в попередньому завданні, ви можете розмістити предмет у власній області, посилаючись на надане вами ім'я. Щоб зробити це, використовуйте властивість `grid-area` на елементі, як цей:
|
||||
|
||||
```css
|
||||
.item1 {
|
||||
grid-area: header;
|
||||
}
|
||||
```
|
||||
|
||||
Дана сітка повідомляє, що вам потрібен клас `1` для переходу в області з назвою `header`. В цьому випадку, елемент буде використовувати весь верхній рядок, тому що весь цей рядок називається областю заголовків.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Помістіть елемент з класу `item5` у область `footer` за допомогою значення `grid-area`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `item5` повинен мати властивості `grid-area`Ю що має значення `footer`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.item5 {grid-area: footer;}</style>
|
||||
```
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 5a94fe3669fb03452672e45f
|
||||
title: Щоб не виконувати одну операцію кілька разів, використайте функцію повтору
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR'
|
||||
forumTopicId: 301133
|
||||
dashedName: reduce-repetition-using-the-repeat-function
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Якщо ви використали `grid-template-columns` і `grid-template-rows`, щоб задати структуру таблиці, ви ввели значення для кожного створеного рядка або стовпця.
|
||||
|
||||
Скажімо, вам потрібна сітка зі 100 рядків однакової висоти. Вводити 100 окремих значень – не дуже зручно. На щастя, є кращий спосіб - використати `repeat`, щоб конкретизувати кількість потрібних стовпців або рядків, а потім додати кому і значення, яке ви хочете повторити.
|
||||
|
||||
Ось приклад створення 100 рядків сітки, кожен 50 пікселів заввишки.
|
||||
|
||||
```css
|
||||
grid-template-rows: repeat(100, 50px);
|
||||
```
|
||||
|
||||
Ви також можете повторювати декілька значень за допомогою цієї функції та вставляти функцію серед інших значень, коли задаєте структуру сітки. Ось як це виглядає:
|
||||
|
||||
```css
|
||||
grid-template-columns: repeat(2, 1fr 50px) 20px;
|
||||
```
|
||||
|
||||
Це перетворюється на:
|
||||
|
||||
```css
|
||||
grid-template-columns: 1fr 50px 1fr 50px 20px;
|
||||
```
|
||||
|
||||
**Note:** двічі повторюється `1fr 50px`, а тоді додається 20px.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуйте `repeat`, щоб видалити повторення із властивості `grid-template-columns`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container` повинен містити властивість `grid-template-columns`, яка має повторювати 3 колонки шириною `1fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-template-columns: repeat(3, 1fr);}</style>
|
||||
```
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d34
|
||||
title: Використовуйте CSS Grid для зміни розміру стовпців і рядків
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cvE8phd'
|
||||
forumTopicId: 301134
|
||||
dashedName: use-css-grid-units-to-change-the-size-of-columns-and-rows
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
В CSS Grid можна використовувати абсолютні і відносні одиниці, такі як `px` і `em`, щоб задати розмір рядків і стовпців. Також можна використати ці:
|
||||
|
||||
`fr` - встановлює стовпець або рядок на частину доступного простору,
|
||||
|
||||
`auto` - встановлює стовпець або рядок автоматично на ширину чи висоту його вмісту,
|
||||
|
||||
`%`- коригує колонку чи рядок на певний відсоток ширини контейнера.
|
||||
|
||||
Ось код, що генерує результат у попередньому перегляді:
|
||||
|
||||
```css
|
||||
grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
```
|
||||
|
||||
Цей фрагмент коду створює п'ять колонок. Перша колонка розтягується на величину свого вмісту, друга колонка - на 50 пікселів, третя колонка - на 10% від контейнера і ще дві колонки; місце, що залишилось, розділене на три частини, дві з яких виділені для четвертої колонки і одна для п'ятої.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть сітку з трьома колонками шириною 1fr, 100px і 2fr відповідно.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `container` повинен мати властивість `grid-template-columns`, яка має три стовпці шириною `1fr, 100px, and 2fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
/* Only change code below this line */
|
||||
|
||||
grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-template-columns: 1fr 100px 2fr;}</style>
|
||||
```
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 5a94fe2669fb03452672e45e
|
||||
title: Використовуйте зону сітки без створення шаблону
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK'
|
||||
forumTopicId: 301135
|
||||
dashedName: use-grid-area-without-creating-an-areas-template
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Властивість `grid-area`, яку ви вивчили в попередньому завданні, може бути використана по-іншому. Якщо ваша сітка не має шаблону зон для посилань, ви можете створити зону в процесі роботи, щоб елемент був розміщений наступним чином:
|
||||
|
||||
```css
|
||||
item1 { grid-area: 1/1/2/4; }
|
||||
```
|
||||
|
||||
Тут використовуються номери рядків, про які ви дізналися раніше щоб визначити, де буде місце для цього елементу. Числа в прикладі, наведеному вище, описують ці значення:
|
||||
|
||||
```css
|
||||
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
|
||||
```
|
||||
|
||||
Таким чином, елемент в прикладі буде використовувати рядки між 1 і 2, а стовпці між 1 і 4.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуючи властивість `grid-area`, помістіть елемент з класу `item5` між третьою та четвертою горизонтальними лініями та між першою і четвертою вертикальними лініями.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `item5` повинен мати властивість `grid-area` для заповнення всієї зони між третьою і четвертою горизонтальними лініями та першою і четвертою вертикальними лініями.
|
||||
|
||||
```js
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.item5 {grid-area: 3/1/4/4;}</style>
|
||||
```
|
||||
@@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 5a90372638fddaf9a66b5d38
|
||||
title: Використовуйте grid-стовпець для контролю інтервалів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr'
|
||||
forumTopicId: 301136
|
||||
dashedName: use-grid-column-to-control-spacing
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
До цієї точки, всі властивості, що обговорювались - це контейнери у сітці. Властивість `grid-column` - це перша властивість для використання в самих елементах сітки.
|
||||
|
||||
Гіпотетичні горизонтальні та вертикальні лінії, які створюють сітку, називаються <dfn>lines</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>
|
||||
|
||||
Для контролю кількості стовпців, що буде використовувати елемент, ви можете використати властивість `grid-column` у поєднанні з номерами рядків, на яких ви хочете, щоб елемент розпочав і зупинився.
|
||||
|
||||
До прикладу:
|
||||
|
||||
```css
|
||||
grid-column: 1 / 3;
|
||||
```
|
||||
|
||||
Це дозволить почати з першого вертикального рядка сітки ліворуч і перейти до третього рядка сітки, використовуючи дві колонки.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Зробіть так, щоб елемент класу `item5` використав дві останні колонки.
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5` клас повинен мати властивість `grid-column`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeWhiteSpace($('style').text())
|
||||
.match(/\.item5{.*grid-column:.*}/g)
|
||||
);
|
||||
```
|
||||
|
||||
`item5` клас повинен мати властивість `grid-column`, що призведе до використання двох останніх колонок сітки.
|
||||
|
||||
```js
|
||||
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
|
||||
const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
|
||||
const result = colStart.toString() + colEnd.toString();
|
||||
const correctResults = [
|
||||
'24',
|
||||
'2-1',
|
||||
'2span 2',
|
||||
'2span2',
|
||||
'span 2-1',
|
||||
'-12',
|
||||
'span 2span 2',
|
||||
'span 2auto',
|
||||
'autospan 2'
|
||||
];
|
||||
assert(correctResults.includes(result));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 5a90373638fddaf9a66b5d39
|
||||
title: Використовуйте властивості grid-row для контролю міжрядкового інтервалу
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c9WBLU4'
|
||||
forumTopicId: 301137
|
||||
dashedName: use-grid-row-to-control-spacing
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Звичайно, ви можете зробити, щоб елементи використали кілька рядків так само, як і колонки. Ви вказуєте на якій горизонтальній лінії сітки починається та закінчується елемент за допомогою властивості `grid-row`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Зробіть так, щоб елемент класу `item5` використав два останні рядки.
|
||||
|
||||
# --hints--
|
||||
|
||||
Клас `item5` повинен мати властивість `grid-row`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g)
|
||||
);
|
||||
```
|
||||
|
||||
Клас `item5` повинен мати властивість `grid-row`, яка сприятиме використанню двох останніх рядки таблиці.
|
||||
|
||||
```js
|
||||
const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
|
||||
const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd;
|
||||
const result = rowStart.toString() + rowEnd.toString();
|
||||
const correctResults = [
|
||||
'24',
|
||||
'2-1',
|
||||
'2span 2',
|
||||
'2span2',
|
||||
'span 2-1',
|
||||
'-12',
|
||||
'span 2span 2',
|
||||
'span 2auto',
|
||||
'autospan 2'
|
||||
];
|
||||
assert(correctResults.includes(result));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
grid-column: 2 / 4;
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
grid-column: 2 / 4;
|
||||
grid-row: 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>
|
||||
```
|
||||
@@ -0,0 +1,174 @@
|
||||
---
|
||||
id: 5a94fe7769fb03452672e463
|
||||
title: Використовуйте медіа-запити, щоб створити адаптивні макети
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk'
|
||||
forumTopicId: 301138
|
||||
dashedName: use-media-queries-to-create-responsive-layouts
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
За допомогою CSS сітки можна з легкістю зробити ваш сайт більш адаптивним, використовуючи медіа-запити, щоб змінити розташування області сітки, змінити розмір сітки, а також - розташування елементів.
|
||||
|
||||
У режимі попереднього перегляду, коли ширина вюпорту становить 300px або й більше, кількість стовпців змінюється від 1 до 2. Потім рекламний простір повністю займає лівий стовпець.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Коли ширина вюпорту становить `400px` або більше, змусьте область верхнього колонтитула повністю захопити верхній рядок, а область нижнього колонтитула - нижній рядок.
|
||||
|
||||
# --hints--
|
||||
|
||||
Коли вюпорт становить `400px` або більше, `container` клас повинен мати властивість `grid-template-areas`, в якій верхній і нижній колонтитули, відповідно, займають верхні та нижні рядки, а реклама та вміст займають лівий і правий стовпці посередині рядка.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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{
|
||||
grid-template-areas:
|
||||
/* Only change code below this line */
|
||||
"advert header"
|
||||
"advert content"
|
||||
"advert footer";
|
||||
/* Only change 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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{
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"advert content"
|
||||
"footer footer";
|
||||
}
|
||||
}
|
||||
</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>
|
||||
```
|
||||
Reference in New Issue
Block a user