1.2 KiB
1.2 KiB
id | title | challengeType | videoUrl | forumTopicId |
---|---|---|---|---|
5a9036ee38fddaf9a66b5d34 | 使用 CSS 网格单位来更改列和行的大小 | 0 | https://scrimba.com/p/pByETK/cvE8phd | 301134 |
--description--
在 CSS 网格中,可以使用绝对单位(如 px
)或相对单位(如 em
)来定义行或列的大小。下面的单位也可以使用:
fr
:设置列或行占剩余空间的比例,
auto
:设置列宽或行高自动等于它的内容的宽度或高度,
%
:将列或行调整为它的容器宽度或高度的百分比,
以下代码为右侧预览区中的效果:
grid-template-columns: auto 50px 10% 2fr 1fr;
这段代码添加了五个列。第一列的宽与它的内容宽度相等;第二列宽 50px;第三列宽是它容器的 10%;最后两列,将剩余的宽度平均分成三份,第四列占两份,第五列占一份。
--instructions--
生成一个包含三列的网格,每列宽度分别为:1fr、100px、2fr。
--hints--
class 为 container
的元素应具有 grid-template-columns
属性且属性值应为 1fr 100px 2fr
。
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi
)
);