chore(learn): Applied MDX format to Chinese curriculum files (#40462)
This commit is contained in:
Randell Dawson
GitHub
@ -1,14 +1,14 @@
|
||||
---
|
||||
id: 5a9036d038fddaf9a66b5d32
|
||||
title: 使用 grid-template-columns 添加多列
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv'
|
||||
forumTopicId: 301117
|
||||
title: 使用 grid-template-columns 添加多列
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
简单地添加一个网格元素并不会有任何明显的效果。你还需要明确网格的结构。在一个网格容器中使用<code>grid-template-columns</code>属性可以添加一些列，示例如下：
|
||||
# --description--
|
||||
|
||||
简单地添加一个网格元素并不会有任何明显的效果。你还需要明确网格的结构。在一个网格容器中使用`grid-template-columns`属性可以添加一些列，示例如下：
|
||||
|
||||
```css
|
||||
.container {
|
||||
@ -17,74 +17,23 @@ title: 使用 grid-template-columns 添加多列
|
||||
}
|
||||
```
|
||||
|
||||
上面的代码可以在网格容器中添加两列，宽度均为 50px。
|
||||
<code>grid-template-columns</code>属性值的个数表示网格的列数，而每个值表示对应列的宽度。
|
||||
</section>
|
||||
上面的代码可以在网格容器中添加两列，宽度均为 50px。 `grid-template-columns`属性值的个数表示网格的列数，而每个值表示对应列的宽度。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给网格容器设置三个列，每列宽度均为<code>100px</code>。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
给网格容器设置三个列，每列宽度均为`100px`。
|
||||
|
||||
```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));
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
/* 请在本行以下添加你的代码 */
|
||||
|
||||
|
||||
/* 请在本行以上添加你的代码 */
|
||||
}
|
||||
</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'>
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-template-columns`属性，该属性有三个值，均为`100px`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,82 +1,30 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d37
|
||||
title: 使用 grid-gap 为网格添加间距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv'
|
||||
forumTopicId: 1301118
|
||||
title: 使用 grid-gap 为网格添加间距
|
||||
---
|
||||
|
||||
## 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>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用<code>grid-gap</code>属性设置行间距为<code>10px</code>，设置列间距为<code>20px</code>。
|
||||
</section>
|
||||
`grid-gap`属性是前两个挑战中的`grid-row-gap`属性和`grid-column-gap`属性的简写，它更方便使用。如果`grid-gap`只有一个值，那么这个值表示行与行之间、列与列之间的间距。如果`grid-gap`有两个值，那么第一个值表示行间距，第二个值表示列间距。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```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));
|
||||
使用`grid-gap`属性设置行间距为`10px`，设置列间距为`20px`。
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
/* 请在本行以下添加你的代码 */
|
||||
|
||||
|
||||
/* 请在本行以上添加你的代码 */
|
||||
}
|
||||
</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'>
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-gap`属性，在行之间设置`10px`的间距，在列之间设置`20px`的间距。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,81 +1,30 @@
|
||||
---
|
||||
id: 5a9036e138fddaf9a66b5d33
|
||||
title: 使用 grid-template-rows 添加多行
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua'
|
||||
forumTopicId: 301119
|
||||
title: 使用 grid-template-rows 添加多行
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
在上个挑战中，你创建的网格会自动设置行数。你可以像用<code>grid-template-columns</code>设置网格的列一样，用<code>grid-template-rows</code>设置网格的行。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
给网格添加两行，使每行高度均为<code>50px</code>。
|
||||
</section>
|
||||
在上个挑战中，你创建的网格会自动设置行数。你可以像用`grid-template-columns`设置网格的列一样，用`grid-template-rows`设置网格的行。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```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));
|
||||
给网格添加两行，使每行高度均为`50px`。
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
/* 请在本行以下添加你的代码 */
|
||||
|
||||
|
||||
/* 请在本行以上添加你的代码 */
|
||||
}
|
||||
</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'>
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-template-rows`属性，且该属性的两个值均为`50px`
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,84 +1,30 @@
|
||||
---
|
||||
id: 5a90376038fddaf9a66b5d3c
|
||||
title: 使用 justify-items 水平对齐所有项目
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn'
|
||||
forumTopicId: 301120
|
||||
title: 使用 justify-items 水平对齐所有项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
有时你想让 CSS 网格中的网格项共享对齐方式。你可以像之前学习的那样分别设置它们的对齐方式，也可以对网格容器使用<code>justify-items</code>使它们一次性沿行轴对齐。对于这个属性你能使用在之前的两个挑战中学到的所有值，与之前不同的是，它将使网格中<b>所有</b>的网格项按所设置的方式对齐。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用<code>justify-items</code>属性设置所有网格项水平居中。
|
||||
</section>
|
||||
有时你想让 CSS 网格中的网格项共享对齐方式。你可以像之前学习的那样分别设置它们的对齐方式，也可以对网格容器使用`justify-items`使它们一次性沿行轴对齐。对于这个属性你能使用在之前的两个挑战中学到的所有值，与之前不同的是，它将使网格中**所有**的网格项按所设置的方式对齐。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>justify-items</code>属性且值为<code>center</code>。'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi));
|
||||
使用`justify-items`属性设置所有网格项水平居中。
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
/* 请在本行以下添加你的代码 */
|
||||
|
||||
|
||||
/* 请在本行以上添加你的代码 */
|
||||
}
|
||||
</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'>
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`justify-items`属性且值为`center`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,84 +1,28 @@
|
||||
---
|
||||
id: 5a94fdf869fb03452672e45b
|
||||
title: 使用 align-items 垂直对齐所有项目
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv'
|
||||
forumTopicId: 301121
|
||||
title: 使用 align-items 垂直对齐所有项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
对网格容器使用<code>align-items</code>属性可以给网格中所有的网格项设置沿列轴对齐的方式。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
请使用<code>align-items</code>属性将所有网格项移动到单元格的末尾。
|
||||
</section>
|
||||
对网格容器使用`align-items`属性可以给网格中所有的网格项设置沿列轴对齐的方式。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>align-items</code>属性且值为<code>end</code>。'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
||||
请使用`align-items`属性将所有网格项移动到单元格的末尾。
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
/* 请在本行以下添加你的代码 */
|
||||
|
||||
|
||||
/* 请在本行以上添加你的代码 */
|
||||
}
|
||||
</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'>
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`align-items`属性且值为`end`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,92 +1,34 @@
|
||||
---
|
||||
id: 5a90374338fddaf9a66b5d3a
|
||||
title: 使用 justify-self 水平对齐项目
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq'
|
||||
forumTopicId: 301122
|
||||
title: 使用 justify-self 水平对齐项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
在 CSS 网格中，每个网格项的内容分别位于被称为<dfn>单元格（cell）</dfn>的框内。你可以使用网格项的<code>justify-self</code>属性，设置其内容的位置在单元格内沿行轴对齐的方式。默认情况下，这个属性的值是<code>stretch</code>，这将使内容占满整个单元格的宽度。该 CSS 网格属性也可以使用其他的值：
|
||||
<code>start</code>：使内容在单元格左侧对齐，
|
||||
<code>center</code>：使内容在单元格居中对齐，
|
||||
<code>end</code>：使内容在单元格右侧对齐，
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使用<code>justify-self</code>属性让类为<code>item2</code>的网格项居中。
|
||||
</section>
|
||||
在 CSS 网格中，每个网格项的内容分别位于被称为<dfn>单元格（cell）</dfn>的框内。你可以使用网格项的`justify-self`属性，设置其内容的位置在单元格内沿行轴对齐的方式。默认情况下，这个属性的值是`stretch`，这将使内容占满整个单元格的宽度。该 CSS 网格属性也可以使用其他的值：
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
`start`：使内容在单元格左侧对齐，
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item2</code>类应该有<code>justify-self</code>属性且值为<code>center</code>。'
|
||||
testString: assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi));
|
||||
`center`：使内容在单元格居中对齐，
|
||||
|
||||
```
|
||||
`end`：使内容在单元格右侧对齐，
|
||||
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## 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;
|
||||
}
|
||||
</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'>
|
||||
使用`justify-self`属性让类为`item2`的网格项居中。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item2`类应该有`justify-self`属性且值为`center`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,88 +1,26 @@
|
||||
---
|
||||
id: 5a90375238fddaf9a66b5d3b
|
||||
title: 使用 align-self 垂直对齐项目
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz'
|
||||
forumTopicId: 301123
|
||||
title: 使用 align-self 垂直对齐项目
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
正如能设置网格项沿行轴对齐方式一样，也可以设置网格项沿列轴对齐：你可以对网格项使用<code>align-self</code>属性。在上一个挑战中适用于<code>justify-self</code>属性的每个值也都适用于<code>align-self</code>属性。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
用值<code>end</code>使类为<code>item3</code>的网格项底端对齐。
|
||||
</section>
|
||||
正如能设置网格项沿行轴对齐方式一样，也可以设置网格项沿列轴对齐：你可以对网格项使用`align-self`属性。在上一个挑战中适用于`justify-self`属性的每个值也都适用于`align-self`属性。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```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));
|
||||
用值`end`使类为`item3`的网格项底端对齐。
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
}
|
||||
</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'>
|
||||
# --hints--
|
||||
|
||||
`item3`类应该有`align-self`属性且值为`end`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,90 +1,36 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d35
|
||||
title: 使用 grid-column-gap 创建多列之间的间距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD'
|
||||
forumTopicId: 301124
|
||||
title: 使用 grid-column-gap 创建多列之间的间距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
到目前为止，在你所建立的网格中列都相互紧挨着。如果需要在列与列之间添加一些间距，我们可以使用<code>grid-column-gap</code>：
|
||||
# --description--
|
||||
|
||||
到目前为止，在你所建立的网格中列都相互紧挨着。如果需要在列与列之间添加一些间距，我们可以使用`grid-column-gap`：
|
||||
|
||||
```css
|
||||
grid-column-gap: 10px;
|
||||
```
|
||||
|
||||
这会在我们创建的所有列之间添加 10px 的空白间距。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
为网格中的列添加宽度为<code>20px</code>的间距。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
为网格中的列添加宽度为`20px`的间距。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>grid-column-gap</code>属性且值为<code>20px</code>。'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
/* 请在本行以下添加你的代码 */
|
||||
|
||||
|
||||
/* 请在本行以上添加你的代码 */
|
||||
}
|
||||
</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'>
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-column-gap`属性且值为`20px`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,83 +1,28 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d36
|
||||
title: 使用 grid-row-gap 创建多行之间的间距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv'
|
||||
forumTopicId: 301125
|
||||
title: 使用 grid-row-gap 创建多行之间的间距
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
和上个挑战在两列之间添加间距一样，你可以用<code>grid-row-gap</code>在两行之间设置间距。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
为网格中的行添加高度为<code>5px</code>的间距。
|
||||
</section>
|
||||
和上个挑战在两列之间添加间距一样，你可以用`grid-row-gap`在两行之间设置间距。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>grid-row-gap</code>属性且值为<code>5px</code>。'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi));
|
||||
为网格中的行添加高度为`5px`的间距。
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
/* 请在本行以下添加你的代码 */
|
||||
|
||||
|
||||
/* 请在本行以上添加你的代码 */
|
||||
}
|
||||
</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'>
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-row-gap`属性且值为`5px`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,109 +1,38 @@
|
||||
---
|
||||
id: 5a94fe5469fb03452672e461
|
||||
title: 使用 auto-fill 创建弹性布局
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
|
||||
forumTopicId: 301126
|
||||
title: 使用 auto-fill 创建弹性布局
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
重复方法带有一个名为<dfn>自动填充（auto-fill）</dfn>的功能。它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。你可以通过结合<code>auto-fill</code>和<code>minmax</code>来更灵活地布局。
|
||||
在最右侧的预览区中，<code>grid-template-columns</code>被设置为：
|
||||
# --description--
|
||||
|
||||
重复方法带有一个名为<dfn>自动填充（auto-fill）</dfn>的功能。它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。你可以通过结合`auto-fill`和`minmax`来更灵活地布局。
|
||||
|
||||
在最右侧的预览区中，`grid-template-columns`被设置为：
|
||||
|
||||
```css
|
||||
repeat(auto-fill, minmax(60px, 1fr));
|
||||
```
|
||||
|
||||
上面的代码效果：列的宽度会随容器大小改变，在可以插入一个 60px 宽的列之前，当前行的所有列会一直拉伸（译者注：动手试一下你就明白了）。
|
||||
<strong>注意：</strong>如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。
|
||||
</section>
|
||||
上面的代码效果：列的宽度会随容器大小改变，在可以插入一个 60px 宽的列之前，当前行的所有列会一直拉伸（译者注：动手试一下你就明白了）。 **注意：** 如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在第一个网格中，用<code>auto-fill</code>和<code>repeat</code>来填充网格，其中列宽的最小值为<code>60px</code>，最大值为<code>1fr</code>。你可以调整最右侧的预览区大小，查看自动填充效果。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
在第一个网格中，用`auto-fill`和`repeat`来填充网格，其中列宽的最小值为`60px`，最大值为`1fr`。你可以调整最右侧的预览区大小，查看自动填充效果。
|
||||
|
||||
```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));
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-template-columns`属性且使用`repeat`和`auto-fill`，以便将最小宽度为`60px`，最大宽度为`1fr`的列填充至网格。
|
||||
|
||||
```js
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## 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(3, 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;
|
||||
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'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,103 +1,33 @@
|
||||
---
|
||||
id: 5a94fe6269fb03452672e462
|
||||
title: 使用 auto-fit 创建弹性布局
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
|
||||
forumTopicId: 301127
|
||||
title: 使用 auto-fit 创建弹性布局
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>auto-fit</code>效果几乎和<code>auto-fill</code>一样。不同点仅在于，当容器的大小大于各网格项之和时，<code>auto-fill</code>将会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而<code>auto-fit</code>则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
|
||||
<strong>注意：</strong><br>如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
在第二个网格中，用<code>auto-fit</code>和<code>repeat</code>来填充网格，其中列宽的最小值为<code>60px</code>，最大值为<code>1fr</code>。你可以调整最右侧的预览区以查看差异。
|
||||
</section>
|
||||
`auto-fit`效果几乎和`auto-fill`一样。不同点仅在于，当容器的大小大于各网格项之和时，`auto-fill`将会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而`auto-fit`则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
|
||||
|
||||
## 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(/.container2\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));
|
||||
# --instructions--
|
||||
|
||||
```
|
||||
在第二个网格中，用`auto-fit`和`repeat`来填充网格，其中列宽的最小值为`60px`，最大值为`1fr`。你可以调整最右侧的预览区以查看差异。
|
||||
|
||||
</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;
|
||||
/* 请修改本行以下的代码 */
|
||||
|
||||
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'>
|
||||
# --hints--
|
||||
|
||||
`container2`类应该有`grid-template-columns`属性，且使用`repeat`和`auto-fit`以便将最小宽度为`60px`，最大宽度为`1fr`的列放入网格。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(
|
||||
/.container2\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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,115 +1,38 @@
|
||||
---
|
||||
id: 5a94fe8569fb03452672e464
|
||||
title: 在网格中创建网格
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c6N78Ap'
|
||||
forumTopicId: 301128
|
||||
title: 在网格中创建网格
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
将元素转换为网格只会影响其子代元素。因此，在把某个子代元素设置为网格后，就会得到一个嵌套的网格。
|
||||
例如，设置类为<code>item3</code>的元素的<code>display</code>和<code>grid-template-columns</code>属性，就会得到一个嵌套的网格。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
用<code>display</code>和<code>grid-template-columns</code>，使类为<code>item3</code>元素转换为有两列且宽度为<code>auto</code>和<code>1fr</code>的网格。
|
||||
</section>
|
||||
例如，设置类为`item3`的元素的`display`和`grid-template-columns`属性，就会得到一个嵌套的网格。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```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));
|
||||
- text: '<code>item3</code>类有<code>display</code>属性且值为<code>grid</code>。'
|
||||
testString: assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
用`display`和`grid-template-columns`，使类为`item3`元素转换为有两列且宽度为`auto`和`1fr`的网格。
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
/* 请在本行以下添加你的代码 */
|
||||
|
||||
|
||||
/* 请在本行以上添加你的代码 */
|
||||
}
|
||||
|
||||
.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'>
|
||||
# --hints--
|
||||
|
||||
`item3`类应该有`grid-template-columns`属性且值为`auto`和`1fr`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(
|
||||
/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
`item3`类有`display`属性且值为`grid`。
|
||||
|
||||
```js
|
||||
assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,80 +1,29 @@
|
||||
---
|
||||
id: 5a858944d96184f06fd60d61
|
||||
title: 创建你的第一个 CSS 网格
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
|
||||
forumTopicId: 301129
|
||||
title: 创建你的第一个 CSS 网格
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
通过将属性<code>display</code>的值设为<code>grid</code>，使 HTML 元素变为网格容器。通过前面的操作，你可以对该容器使用与 CSS 网格（CSS Grid）相关的属性。
|
||||
<strong>注意：</strong><br>在 CSS 网格中，父元素称为<dfn>容器（container）</dfn>，它的子元素称为<dfn>项（items）</dfn>。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
将类为<code>container</code>的 div 的<code>display</code>属性改为<code>grid</code>。
|
||||
</section>
|
||||
通过将属性`display`的值设为`grid`，使 HTML 元素变为网格容器。通过前面的操作，你可以对该容器使用与 CSS 网格（CSS Grid）相关的属性。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
**注意：**
|
||||
在 CSS 网格中，父元素称为<dfn>容器（container）</dfn>，它的子元素称为<dfn>项（items）</dfn>。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>display</code>属性且值为<code>grid</code>。'
|
||||
testString: assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
# --instructions--
|
||||
|
||||
```
|
||||
将类为`container`的 div 的`display`属性改为`grid`。
|
||||
|
||||
</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;
|
||||
/* 请在本行以下添加你的代码 */
|
||||
|
||||
|
||||
/* 请在本行以上添加你的代码 */
|
||||
}
|
||||
</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'>
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`display`属性且值为`grid`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
---
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: 将网格划分为区域模板
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
|
||||
forumTopicId: 301130
|
||||
title: 将网格划分为区域模板
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
你可以将网格中的一些网格单元格组合成一个<dfn>区域（area）</dfn>，并为该区域指定一个自定义名称。你可以通过给容器加上<code>grid-template-areas</code>来实现：
|
||||
# --description--
|
||||
|
||||
你可以将网格中的一些网格单元格组合成一个<dfn>区域（area）</dfn>，并为该区域指定一个自定义名称。你可以通过给容器加上`grid-template-areas`来实现：
|
||||
|
||||
```css
|
||||
grid-template-areas:
|
||||
@ -17,81 +17,24 @@ grid-template-areas:
|
||||
"footer footer footer";
|
||||
```
|
||||
|
||||
上面的代码将顶部三个单元格合并成一个名为<code>header</code>的区域，将底部三个单元格合并为一个名为<code>footer</code>的区域，并在中间行生成两个区域————<code>advert</code>和<code>content</code>。
|
||||
<strong>注意：</strong><br>在代码中，每个单词代表一个网格单元格，每对引号代表一行。
|
||||
除了自定义标签，你还能使用句点（<code>.</code>）来表示一个空单元格。
|
||||
</section>
|
||||
上面的代码将顶部三个单元格合并成一个名为`header`的区域，将底部三个单元格合并为一个名为`footer`的区域，并在中间行生成两个区域————`advert`和`content`。 **注意：**
|
||||
在代码中，每个单词代表一个网格单元格，每对引号代表一行。 除了自定义标签，你还能使用句点（`.`）来表示一个空单元格。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
请放置区域模板，让名为<code>advert</code>的区域变成空单元格。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
请放置区域模板，让名为`advert`的区域变成空单元格。
|
||||
|
||||
```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));
|
||||
# --hints--
|
||||
|
||||
`container`类应该有类似于最右侧预览区的`grid-template-areas`属性且用`.`代替`advert`。
|
||||
|
||||
```js
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## 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;
|
||||
/* 请修改本行以下的代码 */
|
||||
|
||||
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'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,90 +1,36 @@
|
||||
---
|
||||
id: 5a94fe4469fb03452672e460
|
||||
title: 使用 minmax 函数限制项目大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv'
|
||||
forumTopicId: 301131
|
||||
title: 使用 minmax 函数限制项目大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
此外，内置函数<code>minmax</code>也可以可用于设置<code>grid-template-columns</code>和<code>grid-template-rows</code>的值。它的作用是在网格容器改变大小时限制网格项的大小。为此，你需要指定网格项允许的尺寸范围。例如：
|
||||
# --description--
|
||||
|
||||
此外，内置函数`minmax`也可以可用于设置`grid-template-columns`和`grid-template-rows`的值。它的作用是在网格容器改变大小时限制网格项的大小。为此，你需要指定网格项允许的尺寸范围。例如：
|
||||
|
||||
```css
|
||||
grid-template-columns: 100px minmax(50px, 200px);
|
||||
```
|
||||
|
||||
在上面的代码中，通过<code>grid-template-columns</code>添加两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。
|
||||
</section>
|
||||
在上面的代码中，通过`grid-template-columns`添加两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
用<code>minmax</code>函数替换<code>repeat</code>函数中的<code>1fr</code>，限定其最小值为<code>90px</code>，最大值为<code>1fr</code>，你可以调整最右侧的预览面板查看效果。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
用`minmax`函数替换`repeat`函数中的`1fr`，限定其最小值为`90px`，最大值为`1fr`，你可以调整最右侧的预览面板查看效果。
|
||||
|
||||
```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));
|
||||
|
||||
```
|
||||
|
||||
</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: repeat(3, 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'>
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-template-columns`属性且设置重复 3 列，每列宽度最小值为`90px`，最大值为`1fr`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
---
|
||||
id: 5a94fe1369fb03452672e45d
|
||||
title: 使用 grid-area 属性将项目放置在网格区域中
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV'
|
||||
forumTopicId: 301132
|
||||
title: 使用 grid-area 属性将项目放置在网格区域中
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
像上一个挑战那样，在为网格添加区域模板后，你可以通过引用你所定义的区域的名称，将元素放入相应的区域。为此，你需要对网格项使用<code>grid-area</code>：
|
||||
# --description--
|
||||
|
||||
像上一个挑战那样，在为网格添加区域模板后，你可以通过引用你所定义的区域的名称，将元素放入相应的区域。为此，你需要对网格项使用`grid-area`：
|
||||
|
||||
```css
|
||||
.item1 {
|
||||
@ -16,84 +16,19 @@ title: 使用 grid-area 属性将项目放置在网格区域中
|
||||
}
|
||||
```
|
||||
|
||||
这样，类名为<code>item1</code>的网格项就被放到了<code>header</code>区域里。在这个示例中，网格项将占用整个顶行，因为这一整行都被命名为 header 区域。
|
||||
</section>
|
||||
这样，类名为`item1`的网格项就被放到了`header`区域里。在这个示例中，网格项将占用整个顶行，因为这一整行都被命名为 header 区域。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
请使用<code>grid-area</code>属性，把类为<code>item5</code>元素放到<code>footer</code>区域。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
请使用`grid-area`属性，把类为`item5`元素放到`footer`区域。
|
||||
|
||||
```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));
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
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'>
|
||||
# --hints--
|
||||
|
||||
`item5`类应该有`grid-area`属性且值为`footer`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
---
|
||||
id: 5a94fe3669fb03452672e45f
|
||||
title: 使用 repeat 函数减少重复
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR'
|
||||
forumTopicId: 301133
|
||||
title: 使用 repeat 函数减少重复
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
当使用<code>grid-template-columns</code>和<code>grid-template-rows</code>定义网格结构时，你需要为添加的每一行和每一列都输入一个值。
|
||||
如果一个网格共有 100 行，每行高度相同，就得输入 100 个值，这不太实际。幸运的是，有一种更好的方法——使用<code>repeat</code>方法指定行或列的重复次数，后面加上逗号以及需要重复的值。
|
||||
# --description--
|
||||
|
||||
当使用`grid-template-columns`和`grid-template-rows`定义网格结构时，你需要为添加的每一行和每一列都输入一个值。
|
||||
|
||||
如果一个网格共有 100 行，每行高度相同，就得输入 100 个值，这不太实际。幸运的是，有一种更好的方法——使用`repeat`方法指定行或列的重复次数，后面加上逗号以及需要重复的值。
|
||||
|
||||
这里有一个添加 100 行网格的例子，使每行高度均为 50px：
|
||||
|
||||
```css
|
||||
@ -28,77 +30,24 @@ grid-template-columns: repeat(2, 1fr 50px) 20px;
|
||||
grid-template-columns: 1fr 50px 1fr 50px 20px;
|
||||
```
|
||||
|
||||
<strong>注意：</strong><br><code>1fr 50px</code>重复了两次，后面跟着 20px。
|
||||
</section>
|
||||
**注意：**
|
||||
`1fr 50px`重复了两次，后面跟着 20px。
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
用<code>repeat</code>代替<code>grid-template-columns</code>属性值中的重复代码。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
用`repeat`代替`grid-template-columns`属性值中的重复代码。
|
||||
|
||||
```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));
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
}
|
||||
</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'>
|
||||
# --hints--
|
||||
|
||||
`container`类应该带有`grid-template-columns`属性且设置为重复 3 列，宽为`1fr`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d34
|
||||
title: 使用 CSS 网格单位来更改列和行的大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cvE8phd'
|
||||
forumTopicId: 301134
|
||||
title: 使用 CSS 网格单位来更改列和行的大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
在 CSS 网格中，可以使用绝对定位和相对定位单位如<code>px</code>和<code>em</code>来确定行或列的大小。下面的单位也可以使用：
|
||||
<code>fr</code>：设置列或行占剩余空间的一个比例，
|
||||
<code>auto</code>：设置列宽或行高自动等于它的内容的宽度或高度，
|
||||
<code>%</code>：将列或行调整为它的容器宽度或高度的百分比，
|
||||
# --description--
|
||||
|
||||
在 CSS 网格中，可以使用绝对定位和相对定位单位如`px`和`em`来确定行或列的大小。下面的单位也可以使用：
|
||||
|
||||
`fr`：设置列或行占剩余空间的一个比例，
|
||||
|
||||
`auto`：设置列宽或行高自动等于它的内容的宽度或高度，
|
||||
|
||||
`%`：将列或行调整为它的容器宽度或高度的百分比，
|
||||
|
||||
最右侧的预览区中的效果通过下面的代码实现：
|
||||
|
||||
```css
|
||||
@ -19,74 +23,22 @@ grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
```
|
||||
|
||||
这段代码添加了五个列。第一列的宽与它的内容宽度相等；第二列宽 50px；第三列宽是它容器的 10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
# --instructions--
|
||||
|
||||
生成一个包含三列的网格，每列宽度分别为：1fr，100px，和 2fr。
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>container</code>类应该有<code>grid-template-columns</code>属性，且生成宽为<code>1fr, 100px</code>和<code>2fr</code>的三列。'
|
||||
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi));'
|
||||
|
||||
```
|
||||
|
||||
</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: auto 50px 10% 2fr 1fr;
|
||||
|
||||
/* 请修改本行以上的代码 */
|
||||
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'>
|
||||
# --hints--
|
||||
|
||||
`container`类应该有`grid-template-columns`属性，且生成宽为`1fr, 100px`和`2fr`的三列。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
---
|
||||
id: 5a94fe2669fb03452672e45e
|
||||
title: 使用 grid-area 创建区域模板
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK'
|
||||
forumTopicId: 301135
|
||||
title: 使用 grid-area 创建区域模板
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
你在上一次挑战中学到的<code>grid-area</code>属性有另一种使用方式。如果网格中没有定义区域模板，你也可以像这样为它添加一个模板：
|
||||
# --description--
|
||||
|
||||
你在上一次挑战中学到的`grid-area`属性有另一种使用方式。如果网格中没有定义区域模板，你也可以像这样为它添加一个模板：
|
||||
|
||||
```css
|
||||
item1 { grid-area: 1/1/2/4; }
|
||||
@ -21,79 +21,22 @@ grid-area: horizontal line to start at / vertical line to start at / horizontal
|
||||
```
|
||||
|
||||
因此，示例中的网格项将占用第 1 条水平网格线（起始）和第 2 条水平网格线（终止）之间的行，及第 1 条垂直网格线（起始）和第 4 条垂直网格线（终止）之间的列。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
请用<code>grid-area</code>属性将类为<code>item5</code>的元素放置在第 3 条和第 4 条水平网格线及第 1 条和第 4 条水平网格线之间的区域内。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
请用`grid-area`属性将类为`item5`的元素放置在第 3 条和第 4 条水平网格线及第 1 条和第 4 条水平网格线之间的区域内。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item5</code>类应该有<code>grid-area</code>属性且值为<code>3/1/4/4</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));
|
||||
|
||||
```
|
||||
|
||||
</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;
|
||||
}
|
||||
</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'>
|
||||
# --hints--
|
||||
|
||||
`item5`类应该有`grid-area`属性且值为`3/1/4/4`。
|
||||
|
||||
```js
|
||||
// solution required
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
---
|
||||
id: 5a90372638fddaf9a66b5d38
|
||||
title: 使用 grid-column 来控制空间大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr'
|
||||
forumTopicId: 301136
|
||||
title: 使用 grid-column 来控制空间大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
到目前为止，所有的讨论都是围绕网格容器的。<code>grid-column</code>属性是第一个用于网格项本身的属性。
|
||||
# --description--
|
||||
|
||||
到目前为止，所有的讨论都是围绕网格容器的。`grid-column`属性是第一个用于网格项本身的属性。
|
||||
|
||||
网格的假想水平线和垂直线被称为<dfn>线（lines）</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;">column lines</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;">row lines</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>属性定义网格项开始和结束的位置，进而控制每个网格项占用的列数。
|
||||
|
||||
<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;'>column lines</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;'>row lines</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>
|
||||
|
||||
你可以用`grid-column`属性定义网格项开始和结束的位置，进而控制每个网格项占用的列数。
|
||||
|
||||
示例如下：
|
||||
|
||||
```css
|
||||
@ -20,84 +25,43 @@ grid-column: 1 / 3;
|
||||
```
|
||||
|
||||
这会让网格项从左侧第一条线开始到第三条线结束，占用两列。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使类为<code>item5</code>的网格项占用网格的最后两列。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
使类为`item5`的网格项占用网格的最后两列。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item5</code>类应该有<code>grid-column</code>属性且其值为<code>2 / 4</code>。'
|
||||
testString: assert($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-column:.*}/g));
|
||||
- text: '<code>item5</code> 类应该有 <code>grid-column</code> 属性使其占用网格最后两列。'
|
||||
testString: "
|
||||
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
|
||||
const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
|
||||
const result = colStart.toString() + colEnd.toString();
|
||||
const correctResults = ['24', '2-1', '2span 2', '2span2', 'span 2-1', '-12', 'span 2span 2', 'span 2auto', 'autospan 2'];
|
||||
assert(correctResults.includes(result));
|
||||
"
|
||||
# --hints--
|
||||
|
||||
`item5`类应该有`grid-column`属性且其值为`2 / 4`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('style')
|
||||
.text()
|
||||
.replace(/\s/g, '')
|
||||
.match(/\.item5{.*grid-column:.*}/g)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
`item5` 类应该有 `grid-column` 属性使其占用网格最后两列。
|
||||
|
||||
## 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;
|
||||
}
|
||||
</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>
|
||||
```js
|
||||
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
|
||||
const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
|
||||
const result = colStart.toString() + colEnd.toString();
|
||||
const correctResults = [
|
||||
'24',
|
||||
'2-1',
|
||||
'2span 2',
|
||||
'2span2',
|
||||
'span 2-1',
|
||||
'-12',
|
||||
'span 2span 2',
|
||||
'span 2auto',
|
||||
'autospan 2'
|
||||
];
|
||||
assert(correctResults.includes(result));
|
||||
```
|
||||
|
||||
</div>
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,95 +1,51 @@
|
||||
---
|
||||
id: 5a90373638fddaf9a66b5d39
|
||||
title: 使用 grid-row 来控制空间大小
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c9WBLU4'
|
||||
forumTopicId: 301137
|
||||
title: 使用 grid-row 来控制空间大小
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
当然，和设置一个网格项占用多列一样，你也可以设置它占用多行。你可以使用<code>grid-row</code>属性来定义一个网格项开始和结束的水平线。
|
||||
</section>
|
||||
# --description--
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
使类为<code>item5</code>的元素占用最后两行。
|
||||
</section>
|
||||
当然，和设置一个网格项占用多列一样，你也可以设置它占用多行。你可以使用`grid-row`属性来定义一个网格项开始和结束的水平线。
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
# --instructions--
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '<code>item5</code>类应该有<code>grid-row</code>属性且值为<code>2 / 4</code>。'
|
||||
testString: assert($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-row:.*}/g));
|
||||
- text: '<code>item5</code> class 应该有 <code>grid-row</code> 属性使其占用网格最后两行。'
|
||||
testString: "
|
||||
const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
|
||||
const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd;
|
||||
const result = rowStart.toString() + rowEnd.toString();
|
||||
const correctResults = ['24', '2-1', '2span 2', '2span2', 'span 2-1', '-12', 'span 2span 2', 'span 2auto', 'autospan 2'];
|
||||
assert(correctResults.includes(result));
|
||||
"
|
||||
使类为`item5`的元素占用最后两行。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5`类应该有`grid-row`属性且值为`2 / 4`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('style')
|
||||
.text()
|
||||
.replace(/\s/g, '')
|
||||
.match(/\.item5{.*grid-row:.*}/g)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
`item5` class 应该有 `grid-row` 属性使其占用网格最后两行。
|
||||
|
||||
## 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;
|
||||
/* 请在本行以下添加你的代码 */
|
||||
|
||||
|
||||
/* 请在本行以上添加你的代码 */
|
||||
}
|
||||
|
||||
.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>
|
||||
```js
|
||||
const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
|
||||
const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd;
|
||||
const result = rowStart.toString() + rowEnd.toString();
|
||||
const correctResults = [
|
||||
'24',
|
||||
'2-1',
|
||||
'2span 2',
|
||||
'2span2',
|
||||
'span 2-1',
|
||||
'-12',
|
||||
'span 2span 2',
|
||||
'span 2auto',
|
||||
'autospan 2'
|
||||
];
|
||||
assert(correctResults.includes(result));
|
||||
```
|
||||
|
||||
</div>
|
||||
# --solutions--
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,122 +1,32 @@
|
||||
---
|
||||
id: 5a94fe7769fb03452672e463
|
||||
title: 使用媒体查询创建响应式布局
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk'
|
||||
forumTopicId: 301138
|
||||
title: 使用媒体查询创建响应式布局
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
# --description--
|
||||
|
||||
通过使用媒体查询重新排列网格区域，更改网格尺寸以及重新排列网格项位置，CSS 网格能轻松地使网站更具响应性。
|
||||
|
||||
在最右侧的预览区中，当网页可视区域的宽不小于 300px 时，列数从 1 变为 2。并且，广告（advertisement）区域完全占据左列。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
当网页可视区域的宽不小于<code>400px</code>时，使 header 区域完全占据最顶行，footer 区域完全占据最底行。
|
||||
</section>
|
||||
# --instructions--
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
当网页可视区域的宽不小于`400px`时，使 header 区域完全占据最顶行，footer 区域完全占据最底行。
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: '当网页可视区域的宽在<code>400px</code>及以上时，<code>container</code>类应该带有<code>grid-template-areas</code>属性且能够使得 footer 和 header 区域分别占据顶行和底行，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));
|
||||
# --hints--
|
||||
|
||||
当网页可视区域的宽在`400px`及以上时，`container`类应该带有`grid-template-areas`属性且能够使得 footer 和 header 区域分别占据顶行和底行，advert 和 content 区域分别占据中间行的左和右列。
|
||||
|
||||
```js
|
||||
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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
</section>
|
||||
# --solutions--
|
||||
|
||||
## 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{
|
||||
/* 请修改本行以下的代码 */
|
||||
|
||||
grid-template-areas:
|
||||
"advert header"
|
||||
"advert content"
|
||||
"advert footer";
|
||||
|
||||
/* 请修改本行以上的代码*/
|
||||
}
|
||||
}
|
||||
</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'>
|
||||
|
||||
```html
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user