Files
freeCodeCamp/curriculum/challenges/russian/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.russian.md

77 lines
2.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
id: 5a9036ee38fddaf9a66b5d37
title: Add Gaps Faster with grid-gap
challengeType: 0
videoUrl: ''
localeTitle: Добавить пробелы быстрее с разрывом сетки
---
## Description
<section id="description"> <code>grid-gap</code> - это сокращенное свойство для <code>grid-row-gap</code> <code>grid-column-gap</code> и <code>grid-row-gap</code> <code>grid-column-gap</code> из двух предыдущих задач, которые более удобны в использовании. Если <code>grid-gap</code> имеет одно значение, это создаст разрыв между всеми строками и столбцами. Однако, если есть два значения, он будет использовать первый, чтобы установить разрыв между строками и вторым значением для столбцов. </section>
## Instructions
<section id="instructions"> Используйте <code>grid-gap</code> чтобы ввести <code>10px</code> зазор между строками и <code>20px</code> разрыв между столбцами. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: класс <code>container</code> должен иметь свойство <code>grid-gap</code> которое вводит разрыв <code>10px</code> между строками и <code>20px</code> разрыв между столбцами.
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* add your code below this line */
/* add your code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>