1.1 KiB
1.1 KiB
id, title, challengeType, videoUrl, forumTopicId
| id | title | challengeType | videoUrl | forumTopicId |
|---|---|---|---|---|
| 5a94fe4469fb03452672e460 | 使用 minmax 函数限制项目大小 | 0 | https://scrimba.com/p/pByETK/cD97RTv | 301131 |
--description--
此外，内置函数minmax也可以可用于设置grid-template-columns和grid-template-rows的值。它的作用是在网格容器改变大小时限制网格项的大小。为此，你需要指定网格项允许的尺寸范围。例如：
grid-template-columns: 100px minmax(50px, 200px);
在上面的代码中，通过grid-template-columns添加两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。
--instructions--
用minmax函数替换repeat函数中的1fr，限定其最小值为90px，最大值为1fr，你可以调整最右侧的预览面板查看效果。
--hints--
container类应该有grid-template-columns属性且设置重复 3 列，每列宽度最小值为90px，最大值为1fr。
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
)
);