2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
|
id: 5a94fe6269fb03452672e462
|
2020-12-16 07:37:30 +00:00
|
|
|
title: 使用 auto-fit 创建弹性布局
|
2018-10-10 22:03:03 +00:00
|
|
|
challengeType: 0
|
2020-02-11 13:39:15 +00:00
|
|
|
videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
|
|
|
|
|
forumTopicId: 301127
|
2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --description--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
`auto-fit`效果几乎和`auto-fill`一样。不同点仅在于，当容器的大小大于各网格项之和时，`auto-fill`将会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而`auto-fit`则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
**注意：**
|
|
|
|
|
如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --instructions--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
在第二个网格中，用`auto-fit`和`repeat`来填充网格，其中列宽的最小值为`60px`，最大值为`1fr`。你可以调整最右侧的预览区以查看差异。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --hints--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
`container2`类应该有`grid-template-columns`属性，且使用`repeat`和`auto-fit`以便将最小宽度为`60px`，最大宽度为`1fr`的列放入网格。
|
2020-02-11 13:39:15 +00:00
|
|
|
|
2018-10-10 22:03:03 +00:00
|
|
|
```js
|
2020-12-16 07:37:30 +00:00
|
|
|
assert(
|
|
|
|
|
code.match(
|
|
|
|
|
/.container2\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
|
|
|
|
|
)
|
|
|
|
|
);
|
2018-10-10 22:03:03 +00:00
|
|
|
```
|
2020-02-11 13:39:15 +00:00
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
# --solutions--
|
|
|
|
|
|
