---
id: 5a94fe5469fb03452672e461
title: Create Flexible Layouts Using auto-fill
challengeType: 0
videoUrl: ''
localeTitle: Создание гибких макетов с использованием автозаполнения
---
## Description
Функция повтора поставляется с опцией, называемой автозаполнением . Это позволяет автоматически вставлять столько строк или столбцов требуемого размера, сколько возможно, в зависимости от размера контейнера. Вы можете создавать гибкие макеты при объединении auto-fill
с minmax
. В предварительном просмотре grid-template-columns
установлены на repeat (автозаполнение, minmax (60px, 1fr));
Когда контейнер меняет размер, эта настройка сохраняет вставки столбцов 60px и растягивает их до тех пор, пока не сможет вставить другой. Заметка
Если ваш контейнер не может поместить все ваши предметы в одну строку, он переместит их на новый.
## Instructions
В первой сетке используйте auto-fill
с repeat
чтобы заполнить сетку столбцами, которые имеют минимальную ширину 60px
и максимум 1fr
. Затем измените размер предварительного просмотра, чтобы увидеть автоматическое заполнение в действии.
## Tests
```yml
tests:
- text: 'класс container
должен иметь свойство grid-template-columns
с repeat
и auto-fill
, которое заполняет сетку столбцами с минимальной шириной 60px
и максимум 1fr
.'
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), "container
class should have a grid-template-columns
property with repeat
and auto-fill
that will fill the grid with columns that have a minimum width of 60px
and maximum of 1fr
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```