1.6 KiB
1.6 KiB
id | challengeType | videoUrl | forumTopicId | localeTitle |
---|---|---|---|---|
5a9036e138fddaf9a66b5d33 | 0 | https://scrimba.com/p/pByETK/cbp9Pua | 301119 | 使用 grid-template-rows 添加多行 |
Description
grid-template-columns
设置网格的列一样,用grid-template-rows
设置网格的行。
Instructions
50px
。
Tests
tests:
- text: '<code>container</code>类应该有<code>grid-template-rows</code>属性,且该属性的两个值均为<code>50px</code>'
testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi));
Challenge Seed
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 100px 100px 100px;
/* 请在本行以下添加你的代码 */
/* 请在本行以上添加你的代码 */
}
</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>
Solution
// solution required