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