1.4 KiB
1.4 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
5a858944d96184f06fd60d61 | 创建你的第一个 CSS 网格 | 0 | https://scrimba.com/p/pByETK/cqwREC4 | 301129 | create-your-first-css-grid |
--description--
通过将属性 display
的值设为 grid
,HTML 元素就可以变为网格容器。 通过前面的操作,你可以对该容器使用与 CSS 网格(CSS Grid)相关的属性。
**注意:**在 CSS 网格中,父元素称为容器(container),它的子元素称为项(items)。
--instructions--
请将 class 为 container
的 div 的 display 属性值设置为 grid
。
--hints--
container
class 应具有 display
属性,属性值应为 grid
。
assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
--seed--
--seed-contents--
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
/* Only change code below this line */
/* Only change code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
--solutions--
<style>.container {display: grid;}</style>