freeCodeCamp

3.5 KiB

Raw Blame History

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

3.5 KiB Raw Blame History Unescape Escape