3.5 KiB
3.5 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
5a94fe3669fb03452672e45f | Reduce Repetition Using the repeat Function | 0 | Уменьшить повторение с помощью функции повтора |
Description
grid-template-columns
и grid-template-rows
для определения структуры сетки, вы ввели значение для каждой строки или столбца, который вы создали. Допустим, вам нужна сетка со 100 рядами одинаковой высоты. Внести 100 значений по отдельности не очень удобно. К счастью, есть лучший способ - с помощью функции repeat
указать количество раз, когда вы хотите repeat
свой столбец или строку, а затем запятую и значение, которое вы хотите повторить. Вот пример, который создавал бы сетку из 100 строк, каждая строка была бы высотой 50 пикселей. grid-template-rows: repeat (100, 50px);Вы также можете повторить несколько значений с помощью функции повтора и вставить функцию среди других значений при определении структуры сетки. Вот что я имею в виду:
grid-template-columns: repeat (2, 1fr 50px) 20px;Это означает:
grid-template-columns: 1fr 50px 1fr 50px 20px;Заметка
1fr 50px
повторяется дважды, затем 20px. Instructions
repeat
чтобы удалить повторение из свойства grid-template-columns
. Tests
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>.");'
Challenge Seed
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
/* change the code below this line */
grid-template-columns: 1fr 1fr 1fr;
/* change the code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
Solution
// solution required