1.6 KiB
1.6 KiB
id, title, challengeType, videoUrl, forumTopicId
| id | title | challengeType | videoUrl | forumTopicId |
|---|---|---|---|---|
| 5a94fe5469fb03452672e461 | 使用 auto-fill 创建弹性布局 | 0 | https://scrimba.com/p/pByETK/cmzdycW | 301126 |
--description--
repeat 方法带有一个名为自动填充（auto-fill）的功能。它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。你可以通过结合 auto-fill 和 minmax 来更灵活地布局。
在最右侧的预览区中，grid-template-columns 被设置为：
repeat(auto-fill, minmax(60px, 1fr));
上面的代码效果是这样：首先，列的宽度会随容器大小改变。其次，只要容器宽度不足以插入一个宽为 60px 的列，当前行的所有列就都会一直拉伸。请自己调整宽度，动手试一下就不难理解了。**注意：**如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。
--instructions--
在第一个网格中，请使用 auto-fill 和 repeat 来填充网格。其中列宽的最小值为 60px，最大值为 1fr。你可以调整最右侧的预览区大小，查看自动填充的效果。
--hints--
class 为 container 的元素应具有 grid-template-columns 属性，且属性值应使用 repeat 和 auto-fill，以便将最小宽度为 60px、最大宽度为 1fr 的列填充至网格。
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
)
);