---
id: 5a94fe4469fb03452672e460
title: Limit Item Size Using the minmax Function
challengeType: 0
videoUrl: ''
localeTitle: 限制项目大小使用minmax功能
---
## Description
还有另一个内置函数可用于grid-template-columns
和grid-template-rows
称为minmax
。当网格容器改变大小时,它用于限制项目的大小。为此,您需要指定项目的可接受尺寸范围。这是一个例子: grid-template-columns:100px minmax(50px,200px);
在上面的代码中, grid-template-columns
设置为创建两列;第一个是100px宽,第二个是最小宽度50px,最大宽度是200px。
## Instructions
使用minmax
函数,将repeat
函数中的1fr
替换为最小宽度为90px
且最大宽度为1fr
的列大小,并调整预览面板的大小以查看效果。
## Tests
```yml
tests:
- text: container
类应具有grid-template-columns
属性,该属性设置为重复3列,最小宽度为90px
,最大宽度为1fr
。
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "container
class should have a grid-template-columns
property that is set to repeat 3 columns with the minimum width of 90px
and maximum width of 1fr
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```