Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 5a9036d038fddaf9a66b5d32
|
||||
title: Add Columns with grid-template-columns
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用grid-template-columns添加列
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">简单地创建一个网格元素并不会让你走得太远。您还需要定义网格的结构。要向网格添加一些列，请在网格容器上使用<code>grid-template-columns</code>属性，如下所示： <blockquote> 。容器 { <br>显示：网格; <br> grid-template-columns：50px 50px; <br> } </blockquote>这将为您的网格提供两列，每列50px宽。给<code>grid-template-columns</code>属性的参数数量表示<code>grid-template-columns</code>数，每个参数的值表示每列的宽度。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">为网格容器提供三列，每列<code>100px</code>宽。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code>类应该有一个<code>grid-template-columns</code>属性，其中三个单元为<code>100px</code> 。
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d37
|
||||
title: Add Gaps Faster with grid-gap
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 通过网格间隙更快地添加间隙
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>grid-gap</code>是<code>grid-row-gap</code>和<code>grid-column-gap</code> <code>grid-gap</code>的简写属性，来自前两个更方便使用的挑战。如果<code>grid-gap</code>有一个值，它将在所有行和列之间创建一个间隙。但是，如果有两个值，它将使用第一个值来设置行之间的间隙和列的第二个值。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>grid-gap</code>在行之间引入<code>10px</code>间隙，在列之间引入<code>20px</code>间隙。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code>类应该有一个<code>grid-gap</code>属性，在行之间引入<code>10px</code>间隙，在列之间引入<code>20px</code>间隙。
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.d1{background:LightSkyBlue;}
|
||||
.d2{background:LightSalmon;}
|
||||
.d3{background:PaleTurquoise;}
|
||||
.d4{background:LightPink;}
|
||||
.d5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 5a9036e138fddaf9a66b5d33
|
||||
title: Add Rows with grid-template-rows
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用grid-template-rows添加行
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您在上一次挑战中创建的网格将自动设置行数。要手动调整行，请使用<code>grid-template-rows</code>属性，方法<code>grid-template-columns</code>在先前挑战中使用<code>grid-template-columns</code>方式相同。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在网格中添加两行，每行高<code>50px</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
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), "<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 5a90376038fddaf9a66b5d3c
|
||||
title: Align All Items Horizontally using justify-items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用对齐项目水平对齐所有项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">有时您希望CSS Grid中的所有项目共享相同的对齐方式。您可以使用以前学过的属性并单独对齐它们，也可以使用网格容器上的<code>justify-items</code>将它们全部水平<code>justify-items</code> 。此属性可以接受您在前两个挑战中学到的所有相同值，不同之处在于它会将网格中的<b>所有</b>项目移动到所需的对齐方式。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用此属性可以水平居中所有项目。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code>类应该有一个具有<code>center</code>值的<code>justify-items</code>属性。
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 5a94fdf869fb03452672e45b
|
||||
title: Align All Items Vertically using align-items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用align-items垂直对齐所有项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">使用网格容器上的<code>align-items</code>属性将为网格中的所有项目设置垂直对齐方式。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">现在使用它将所有项目移动到每个单元格的末尾。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code>类应该具有值为<code>end</code>的<code>align-items</code>属性。
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 5a90374338fddaf9a66b5d3a
|
||||
title: Align an Item Horizontally using justify-self
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用justify-self水平对齐项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">在CSS Grid中，每个项目的内容位于一个称为<dfn>单元格</dfn>的框中。您可以使用网格项上的<code>justify-self</code>属性水平对齐内容在其单元格中的位置。默认情况下，此属性的值为<code>stretch</code> ，这将使内容填充单元格的整个宽度。此CSS Grid属性也接受其他值： <code>start</code> ：对齐单元格左侧的内容， <code>center</code> ：对齐单元格<code>center</code>的内容， <code>end</code> ：对齐单元格右侧的内容。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>justify-self</code>属性将项目与<code>item2</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item2</code>类应该有一个具有<code>center</code>值的<code>justify-self</code>属性。
|
||||
testString: 'assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi), "<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background: LightSkyBlue;}
|
||||
|
||||
.item2 {
|
||||
background: LightSalmon;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 5a90375238fddaf9a66b5d3b
|
||||
title: Align an Item Vertically using align-self
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用align-self垂直对齐项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">正如您可以水平对齐项目一样，也可以垂直对齐项目。为此，您可以在项目上使用<code>align-self</code>属性。此属性接受来自上一次挑战的所有与<code>justify-self</code>相同的值。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">对齐项目与类<code>item3</code>在垂直<code>end</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item3</code>类应该有一个<code>align-self</code>属性，其值为<code>end</code> 。
|
||||
testString: 'assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi), "<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
|
||||
.item3 {
|
||||
background: PaleTurquoise;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d35
|
||||
title: Create a Column Gap Using grid-column-gap
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用grid-column-gap创建列间隙
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">到目前为止，在你创建的网格中，列都相互紧密相连。有时您希望列之间存在间隙。要在列之间添加间隙，请使用<code>grid-column-gap</code>属性，如下所示： <blockquote> grid-column-gap：10px; </blockquote>这会在我们所有列之间创建10px的空白空间。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">为网格中的列提供<code>20px</code>间隙。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code>类应该具有值为<code>20px</code>的<code>grid-column-gap</code>属性。
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.d1{background:LightSkyBlue;}
|
||||
.d2{background:LightSalmon;}
|
||||
.d3{background:PaleTurquoise;}
|
||||
.d4{background:LightPink;}
|
||||
.d5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d36
|
||||
title: Create a Row Gap using grid-row-gap
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用grid-row-gap创建行间隙
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以使用<code>grid-row-gap</code>在<code>grid-row-gap</code>之间添加间隙，方法与在上一个挑战中的列之间添加间隙的方式相同。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">为<code>5px</code>高的行创建间隙。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code>类应该具有值为<code>5px</code>的<code>grid-row-gap</code>属性。
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.d1{background:LightSkyBlue;}
|
||||
.d2{background:LightSalmon;}
|
||||
.d3{background:PaleTurquoise;}
|
||||
.d4{background:LightPink;}
|
||||
.d5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 5a94fe5469fb03452672e461
|
||||
title: Create Flexible Layouts Using auto-fill
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用自动填充创建灵活布局
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">重复功能带有一个名为<dfn>自动填充</dfn>的选项。这允许您根据容器的大小自动插入所需大小的行或列。将<code>auto-fill</code>与<code>minmax</code>组合时，可以创建灵活的布局。在预览中， <code>grid-template-columns</code>设置为<blockquote>重复（自动填充，minmax（60px，1fr））; </blockquote>当容器改变大小时，此设置将继续插入60px列并拉伸它们，直到它可以插入另一个。 <strong>注意</strong> <br>如果您的容器无法将所有项目放在一行上，则会将它们移动到新行。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在第一个网格中，使用带有<code>repeat</code> <code>auto-fill</code>以使用最小宽度为<code>60px</code>且最大为<code>1fr</code>列填充网格。然后调整预览大小以查看自动填充操作。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code>类应该具有<code>grid-template-columns</code>属性，其中包含<code>repeat</code>和<code>auto-fill</code> ，它将使用最小宽度为<code>60px</code>且最大为<code>1fr</code>列填充网格。
|
||||
testString: '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), "<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* change the code below this line */
|
||||
|
||||
grid-template-columns: repeat(3, minmax(60px, 1fr));
|
||||
|
||||
/* change the code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.container2 {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: Silver;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(60px, 1fr));
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
<div class="container2">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,96 @@
|
||||
---
|
||||
id: 5a94fe6269fb03452672e462
|
||||
title: Create Flexible Layouts Using auto-fit
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用自动调整创建灵活布局
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <code>auto-fit</code>几乎与<code>auto-fill</code>相同。唯一的区别是，当容器的大小超过所有项目组合的大小时， <code>auto-fill</code>会继续插入空行或列并将项目推向一侧，而<code>auto-fit</code>折叠这些空行或列并将项目拉伸到适合容器的大小。 <strong>注意</strong> <br>如果您的容器无法将所有项目放在一行上，则会将它们移动到新行。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">在第二个网格中，使用<code>auto-fit</code> <code>repeat</code>以使用最小宽度为<code>60px</code>且最大为<code>1fr</code>列填充网格。然后调整预览大小以查看差异。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container2</code>类应该具有<code>grid-template-columns</code>属性，该属性具有<code>repeat</code>和<code>auto-fit</code> ，它将使用最小宽度为<code>60px</code>且最大为<code>1fr</code>列填充网格。
|
||||
testString: 'assert(code.match(/.container\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), "<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.container2 {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: Silver;
|
||||
display: grid;
|
||||
/* change the code below this line */
|
||||
|
||||
grid-template-columns: repeat(3, minmax(60px, 1fr));
|
||||
|
||||
/* change the code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
<div class="container2">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 5a94fe8569fb03452672e464
|
||||
title: Create Grids within Grids
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 在网格中创建网格
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">将元素转换为网格只会影响其直接后代的行为。因此，通过将直接后代转换为网格，您在网格中有一个网格。例如，通过使用<code>item3</code>类设置元素的<code>display</code>和<code>grid-template-columns</code>属性，可以在网格中创建网格。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>item3</code>类将元素转换为网格，其中两列的宽度为<code>auto</code> ， <code>1fr</code>使用<code>display</code>和<code>grid-template-columns</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item3</code>类应该有一个<code>grid-template-columns</code>属性，其中<code>auto</code>和<code>1fr</code>作为值。
|
||||
testString: 'assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi), "<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.");'
|
||||
- text: <code>item3</code>类应该具有<code>grid</code>值的<code>display</code>属性。
|
||||
testString: 'assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), "<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.container {
|
||||
font-size: 1.5em;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"advert header"
|
||||
"advert content"
|
||||
"advert footer";
|
||||
}
|
||||
.item1 {
|
||||
background: LightSkyBlue;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
background: LightSalmon;
|
||||
grid-area: advert;
|
||||
}
|
||||
|
||||
.item3 {
|
||||
background: PaleTurquoise;
|
||||
grid-area: content;
|
||||
/* enter your code below this line */
|
||||
|
||||
|
||||
/* enter your code above this line */
|
||||
}
|
||||
|
||||
.item4 {
|
||||
background: lightpink;
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
.itemOne {
|
||||
background: PaleGreen;
|
||||
}
|
||||
|
||||
.itemTwo {
|
||||
background: BlanchedAlmond;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">header</div>
|
||||
<div class="item2">advert</div>
|
||||
<div class="item3">
|
||||
<div class="itemOne">paragraph1</div>
|
||||
<div class="itemTwo">paragraph2</div>
|
||||
</div>
|
||||
<div class="item4">footer</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 5a858944d96184f06fd60d61
|
||||
title: Create Your First CSS Grid
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 创建您的第一个CSS网格
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">通过它的设置可以将任何HTML元素成格子容器<code>display</code>属性设置为<code>grid</code> 。这使您能够使用与CSS Grid关联的所有其他属性。 <strong>注意</strong> <br>在CSS Grid中，父元素称为<dfn>容器</dfn> ，其子元素称为<dfn>item</dfn> 。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">将<code>container</code>类的div显示更改为<code>grid</code> 。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code>类应该具有值为<code>grid</code>的<code>display</code>属性。
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.d1{background:LightSkyBlue;}
|
||||
.d2{background:LightSalmon;}
|
||||
.d3{background:PaleTurquoise;}
|
||||
.d4{background:LightPink;}
|
||||
.d5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your 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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: Divide the Grid Into an Area Template
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 将网格划分为区域模板
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以将网格的单元格组合到一个<dfn>区域中，</dfn>并为该区域指定自定义名称。通过在容器上使用<code>grid-template-areas</code>来执行此操作，如下所示： <blockquote>网格模板方面： <br> “标题标题” <br> “广告内容内容” <br> “页脚页脚”; </blockquote>上面的代码将前三个单元格合并为一个名为<code>header</code>的区域，将底部的三个单元格合并为一个<code>footer</code>区域，并在中间行中生成两个区域; <code>advert</code>和<code>content</code> 。 <strong>注意</strong> <br>代码中的每个单词代表一个单元格，每对引号代表一行。除自定义标签外，您还可以使用句点（ <code>.</code> ）指定网格中的空单元格。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">放置区域模板，以便标记为<code>advert</code>的单元格变为空单元格。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code>类应该具有类似于预览但具有的<code>grid-template-areas</code>属性<code>.</code>而不是<code>advert</code>区域。
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
/* change code below this line */
|
||||
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"footer footer footer";
|
||||
/* change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 5a94fe4469fb03452672e460
|
||||
title: Limit Item Size Using the minmax Function
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 限制项目大小使用minmax功能
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">还有另一个内置函数可用于<code>grid-template-columns</code>和<code>grid-template-rows</code>称为<code>minmax</code> 。当网格容器改变大小时，它用于限制项目的大小。为此，您需要指定项目的可接受尺寸范围。这是一个例子： <blockquote> grid-template-columns：100px minmax（50px，200px）; </blockquote>在上面的代码中， <code>grid-template-columns</code>设置为创建两列;第一个是100px宽，第二个是最小宽度50px，最大宽度是200px。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>minmax</code>函数，将<code>repeat</code>函数中的<code>1fr</code>替换为最小宽度为<code>90px</code>且最大宽度为<code>1fr</code>的列大小，并调整预览面板的大小以查看效果。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code>类应具有<code>grid-template-columns</code>属性，该属性设置为重复3列，最小宽度为<code>90px</code> ，最大宽度为<code>1fr</code> 。
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* change the code below this line */
|
||||
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
/* change the code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 5a94fe1369fb03452672e45d
|
||||
title: Place Items in Grid Areas Using the grid-area Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用网格区域属性在网格区域中放置项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">为网格容器创建区域模板后，如上一个挑战所示，您可以通过引用您提供的名称将项目放入自定义区域。为此，您可以在项目上使用<code>grid-area</code>属性，如下所示： <blockquote> .item1 {grid-area：header; } </blockquote>这使网格知道您希望<code>item1</code>类进入名为<code>header</code>的区域。在这种情况下，该项将使用整个顶行，因为整行被命名为标题区域。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>grid-area</code>属性将具有<code>item5</code>类的元素放置在<code>footer</code>区域中。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item5</code>类应该有一个<code>grid-area</code>属性，其值为<code>footer</code> 。
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"footer footer footer";
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 5a94fe3669fb03452672e45f
|
||||
title: Reduce Repetition Using the repeat Function
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用重复功能减少重复
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">使用<code>grid-template-columns</code>和<code>grid-template-rows</code>定义网格结构时，为所创建的每个行或列输入了一个值。让我们说你想要一个100行相同高度的网格。单独插入100个值是不太实际的。幸运的是，有一种更好的方法 - 使用<code>repeat</code>函数指定要重复列或行的次数，后跟逗号和要重复的值。这是一个创建100行网格的示例，每行高度为50px。 <blockquote> grid-template-rows：repeat（100,50px）; </blockquote>您还可以使用repeat函数重复多个值，并在定义网格结构时将该函数插入其他值中。这就是我的意思： <blockquote> grid-template-columns：repeat（2,1fr 50px）20px; </blockquote>这意味着： <blockquote> grid-template-columns：1fr 50px 1fr 50px 20px; </blockquote> <strong>注意</strong> <br> <code>1fr 50px</code>重复两次，然后是20px。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>repeat</code>从<code>grid-template-columns</code>属性中删除重复。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>container</code>类应具有<code>grid-template-columns</code>属性，该属性设置为重复3列，宽度为<code>1fr</code> 。
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* change the code below this line */
|
||||
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
/* change the code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d34
|
||||
title: Use CSS Grid units to Change the Size of Columns and Rows
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用CSS网格单位更改列和行的大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您可以在CSS Grid中使用绝对和相对单位（如<code>px</code>和<code>em</code>来定义行和列的大小。您也可以使用这些： <code>fr</code> ：将列或行设置为可用空间的一小部分， <code>auto</code> ： <code>auto</code>将列或行设置为其内容的宽度或高度， <code>%</code> ：将列或行调整为百分比宽度它的容器。这是在预览中生成输出的代码： <blockquote> grid-template-columns：auto 50px 10％2fr 1fr; </blockquote>此代码段创建了五列。第一列与其内容一样宽，第二列是50px，第三列是其容器的10％，最后两列;剩下的空间分为三个部分，两个分配给第四列，一个分配给第五个。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">创建一个包含三列的网格，其宽度如下：1fr，100px和2fr。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有一个<code>grid-template-columns</code>属性，该属性有三列，宽度如下： <code>1fr, 100px, and 2fr</code> 。'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<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;
|
||||
/* modify the code below this line */
|
||||
|
||||
grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
|
||||
/* modify the code above this line */
|
||||
grid-template-rows: 50px 50px;
|
||||
}
|
||||
</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>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 5a94fe2669fb03452672e45e
|
||||
title: Use grid-area Without Creating an Areas Template
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用网格区域而不创建区域模板
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">您在上一次挑战中学习的<code>grid-area</code>属性可以以其他方式使用。如果您的网格没有要引用的区域模板，您可以动态创建一个区域，以便放置项目，如下所示： <blockquote> item1 {grid-area：1/1/2/4; } </blockquote>这是使用您之前了解的行号来定义此项目的区域。上例中的数字代表以下值： <blockquote>网格区域：水平线开始于/垂直线开始于/水平线结束于/垂直线结束于; </blockquote>因此，示例中的项目将使用第1行和第2行之间的行以及第1行和第4行之间的行。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>grid-area</code>属性，将<code>item5</code>类的元素<code>item5</code>第三和第四条水平线之间以及第一条和第四条垂直线之间。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item5</code>类应该具有值为<code>3/1/4/4</code>的<code>grid-area</code>属性。
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 5a90372638fddaf9a66b5d38
|
||||
title: Use grid-column to Control Spacing
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用grid-column控制间距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">到目前为止，所讨论的所有属性都是针对网格容器的。 <code>grid-column</code>属性是第一个用于网格项本身的属性。创建网格的假设水平和垂直线称为<dfn>线</dfn> 。这些线在网格的左上角从1开始编号，向右移动列，向下移动行，向上计数。这就是3x3网格的线条： <div style="position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;"><p style="left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;">列线</p><p style="left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 1 </p><p style="left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 2 </p><p style="left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 3 </p><p style="left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;"> 4 </p><p style="left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;">行线</p><p style="left:-10%;top:-10%;font-size:130%;position:absolute;"> 1 </p><p style="left:-10%;top:21%;font-size:130%;position:absolute;"> 2 </p><p style="left:-10%;top:53%;font-size:130%;position:absolute;"> 3 </p><p style="left:-10%;top:85%;font-size:130%;position:absolute;"> 4 </p><div style="left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;"></div></div>要控制项目将使用的列数，您可以将<code>grid-column</code>属性与您希望项目开始和停止的行号一起使用。这是一个例子： <blockquote> grid-column：1/3; </blockquote>这将使项目从左侧网格的第一条垂直线开始，并跨越网格的第3条线，消耗两列。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用类<code>item5</code>使项目消耗网格的最后两列。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item5</code>类应该有一个<code>grid-column</code>具有的值属性<code>2 / 4</code>
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-column\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 5a90373638fddaf9a66b5d39
|
||||
title: Use grid-row to Control Spacing
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用网格行控制间距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">当然，您可以像使用列一样使项目消耗多行。您可以使用网格项上的<code>grid-row</code>属性定义项目开始和停止的水平线。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">使用<code>item5</code>类的元素消耗最后两行。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>item5</code>类应该有一个<code>grid-row</code>具有的值属性<code>2 / 4</code>
|
||||
testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), "<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
grid-column: 2 / 4;
|
||||
/* add your code below this line */
|
||||
|
||||
|
||||
/* add your code above this line */
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 5a94fe7769fb03452672e463
|
||||
title: Use Media Queries to Create Responsive Layouts
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用媒体查询创建响应布局
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description">通过使用媒体查询重新排列网格区域，更改网格的尺寸以及重新排列项目的位置，CSS Grid可以轻松地使您的网站更具响应性。在预览中，当视口宽度为300px或更大时，列数从1变为2.广告区域然后完全占据左列。 </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">当视口宽度为<code>400px</code>或更大时，使标题区域完全占据顶行，页脚区域完全占据底行。 </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 当视口为<code>400px</code>或更多时， <code>container</code>类应具有<code>grid-template-areas</code>属性，其中页脚和标题区域分别占据顶行和底行，而advert和content占据中间行的左右列。
|
||||
testString: 'assert(code.match(/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1 {
|
||||
background: LightSkyBlue;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
background: LightSalmon;
|
||||
grid-area: advert;
|
||||
}
|
||||
|
||||
.item3 {
|
||||
background: PaleTurquoise;
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
.item4 {
|
||||
background: lightpink;
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 1.5em;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 50px auto 1fr auto;
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"advert"
|
||||
"content"
|
||||
"footer";
|
||||
}
|
||||
|
||||
@media (min-width: 300px){
|
||||
.container{
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"advert header"
|
||||
"advert content"
|
||||
"advert footer";
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 400px){
|
||||
.container{
|
||||
/* change the code below this line */
|
||||
|
||||
grid-template-areas:
|
||||
"advert header"
|
||||
"advert content"
|
||||
"advert footer";
|
||||
|
||||
/* change the code above this line */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">header</div>
|
||||
<div class="item2">advert</div>
|
||||
<div class="item3">content</div>
|
||||
<div class="item4">footer</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user