---
id: 5a94fe5469fb03452672e461
title: Create Flexible Layouts Using auto-fill
challengeType: 0
videoUrl: ''
localeTitle: 使用自动填充创建灵活布局
---
## Description
重复功能带有一个名为自动填充的选项。这允许您根据容器的大小自动插入所需大小的行或列。将auto-fill
与minmax
组合时,可以创建灵活的布局。在预览中, grid-template-columns
设置为重复(自动填充,minmax(60px,1fr));
当容器改变大小时,此设置将继续插入60px列并拉伸它们,直到它可以插入另一个。 注意
如果您的容器无法将所有项目放在一行上,则会将它们移动到新行。
## Instructions
在第一个网格中,使用带有repeat
auto-fill
以使用最小宽度为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
```