From 81e751d88bed21e1f06675b6ba212e8552ee2b41 Mon Sep 17 00:00:00 2001 From: ZhichengChen Date: Tue, 11 Feb 2020 21:39:15 +0800 Subject: [PATCH] fix(i18n): update Chinese translation of css grid (#37924) --- ...umns-with-grid-template-columns.chinese.md | 43 ++++++++++---- .../add-gaps-faster-with-grid-gap.chinese.md | 31 ++++++---- ...dd-rows-with-grid-template-rows.chinese.md | 33 +++++++---- ...orizontally-using-justify-items.chinese.md | 33 +++++++---- ...ms-vertically-using-align-items.chinese.md | 33 +++++++---- ...horizontally-using-justify-self.chinese.md | 41 ++++++++----- ...tem-vertically-using-align-self.chinese.md | 37 +++++++----- ...olumn-gap-using-grid-column-gap.chinese.md | 40 +++++++++---- ...te-a-row-gap-using-grid-row-gap.chinese.md | 33 +++++++---- ...lexible-layouts-using-auto-fill.chinese.md | 43 +++++++++----- ...flexible-layouts-using-auto-fit.chinese.md | 38 +++++++----- .../create-grids-within-grids.chinese.md | 46 +++++++++------ .../create-your-first-css-grid.chinese.md | 34 +++++++---- ...-the-grid-into-an-area-template.chinese.md | 41 +++++++++---- ...-size-using-the-minmax-function.chinese.md | 39 ++++++++---- ...as-using-the-grid-area-property.chinese.md | 45 +++++++++----- ...ition-using-the-repeat-function.chinese.md | 53 +++++++++++++---- ...ge-the-size-of-columns-and-rows.chinese.md | 47 +++++++++------ ...hout-creating-an-areas-template.chinese.md | 47 ++++++++++----- ...-grid-column-to-control-spacing.chinese.md | 59 +++++++++++++------ ...use-grid-row-to-control-spacing.chinese.md | 44 +++++++++----- ...es-to-create-responsive-layouts.chinese.md | 45 ++++++++------ 22 files changed, 588 insertions(+), 317 deletions(-) diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.chinese.md index db4162bcb5..b42a77b6a1 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.chinese.md @@ -2,23 +2,38 @@ id: 5a9036d038fddaf9a66b5d32 title: Add Columns with grid-template-columns challengeType: 0 -videoUrl: '' -localeTitle: 使用grid-template-columns添加列 +videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv' +forumTopicId: 301117 +localeTitle: 使用 grid-template-columns 添加多列 --- ## Description -
简单地创建一个网格元素并不会让你走得太远。您还需要定义网格的结构。要向网格添加一些列，请在网格容器上使用grid-template-columns属性，如下所示：
。容器 {
显示：网格;
grid-template-columns：50px 50px;
}
这将为您的网格提供两列，每列50px宽。给grid-template-columns属性的参数数量表示grid-template-columns数，每个参数的值表示每列的宽度。
+
+简单地添加一个网格元素并不会有任何明显的效果。你还需要明确网格的结构。在一个网格容器中使用grid-template-columns属性可以添加一些列，示例如下： + +```css +.container { + display: grid; + grid-template-columns: 50px 50px; +} +``` + +上面的代码可以在网格容器中添加两列，宽度均为 50px。 +grid-template-columns属性值的个数表示网格的列数，而每个值表示对应列的宽度。 +
## Instructions -
为网格容器提供三列，每列100px宽。
+
+给网格容器设置三个列，每列宽度均为100px。 +
## Tests
```yml tests: - - text: container类应该有一个grid-template-columns属性，其中三个单元为100px 。 - testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi), "container class should have a grid-template-columns property with three units of 100px.");' + - text: 'container类应该有grid-template-columns属性，该属性有三个值，均为100px。' + testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi));' ``` @@ -36,19 +51,19 @@ tests: .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 */ + /* 请在本行以下添加你的代码 */ + + + /* 请在本行以上添加你的代码 */ } - +
1
2
@@ -56,7 +71,6 @@ tests:
4
5
- ``` @@ -68,7 +82,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.chinese.md index c04fb674e5..20a8432c7a 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.chinese.md @@ -2,23 +2,28 @@ id: 5a9036ee38fddaf9a66b5d37 title: Add Gaps Faster with grid-gap challengeType: 0 -videoUrl: '' -localeTitle: 通过网格间隙更快地添加间隙 +videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv' +forumTopicId: 1301118 +localeTitle: 使用 grid-gap 为网格添加间距 --- ## Description -
grid-gap是grid-row-gap和grid-column-gap grid-gap的简写属性，来自前两个更方便使用的挑战。如果grid-gap有一个值，它将在所有行和列之间创建一个间隙。但是，如果有两个值，它将使用第一个值来设置行之间的间隙和列的第二个值。
+
+grid-gap属性是前两个挑战中的grid-row-gap属性和grid-column-gap属性的简写，它更方便使用。如果grid-gap只有一个值，那么这个值表示行与行之间、列与列之间的间距。如果grid-gap有两个值，那么第一个值表示行间距，第二个值表示列间距。 +
## Instructions -
使用grid-gap在行之间引入10px间隙，在列之间引入20px间隙。
+
+使用grid-gap属性设置行间距为10px，设置列间距为20px。 +
## Tests
```yml tests: - - text: container类应该有一个grid-gap属性，在行之间引入10px间隙，在列之间引入20px间隙。 - testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi), "container class should have a grid-gap property that introduces 10px gap between the rows and 20px gap between the columns.");' + - text: 'container类应该有grid-gap属性，在行之间设置10px的间距，在列之间设置20px的间距。' + testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s*?20px\s*?;[\s\S]*}/gi));' ``` @@ -36,7 +41,7 @@ tests: .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;} - + .container { font-size: 40px; min-height: 300px; @@ -45,10 +50,10 @@ tests: 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 */ + /* 请在本行以下添加你的代码 */ + + + /* 请在本行以上添加你的代码 */ }
@@ -58,7 +63,6 @@ tests:
4
5
- ``` @@ -70,7 +74,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.chinese.md index cc2677c8ca..dc8668e62f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.chinese.md @@ -2,23 +2,28 @@ id: 5a9036e138fddaf9a66b5d33 title: Add Rows with grid-template-rows challengeType: 0 -videoUrl: '' -localeTitle: 使用grid-template-rows添加行 +videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua' +forumTopicId: 301119 +localeTitle: 使用 grid-template-rows 添加多行 --- ## Description -
您在上一次挑战中创建的网格将自动设置行数。要手动调整行，请使用grid-template-rows属性，方法grid-template-columns在先前挑战中使用grid-template-columns方式相同。
+
+在上个挑战中，你创建的网格会自动设置行数。你可以像用grid-template-columns设置网格的列一样，用grid-template-rows设置网格的行。 +
## Instructions -
在网格中添加两行，每行高50px 。
+
+给网格添加两行，使每行高度均为50px。 +
## Tests
```yml tests: - - text: container类应该有一个grid-template-rows属性，其中两个单元为50px 。 - testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi), "container class should have a grid-template-rows property with two units of 50px.");' + - text: 'container类应该有grid-template-rows属性，且该属性的两个值均为50px' + testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi));' ``` @@ -36,20 +41,20 @@ tests: .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 */ + /* 请在本行以下添加你的代码 */ + + + /* 请在本行以上添加你的代码 */ } - +
1
2
@@ -57,7 +62,6 @@ tests:
4
5
- ``` @@ -69,7 +73,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.chinese.md index f805f51836..5310684a8c 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.chinese.md @@ -2,23 +2,28 @@ id: 5a90376038fddaf9a66b5d3c title: Align All Items Horizontally using justify-items challengeType: 0 -videoUrl: '' -localeTitle: 使用对齐项目水平对齐所有项目 +videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn' +forumTopicId: 301120 +localeTitle: 使用 justify-items 水平对齐所有项目 --- ## Description -
有时您希望CSS Grid中的所有项目共享相同的对齐方式。您可以使用以前学过的属性并单独对齐它们，也可以使用网格容器上的justify-items将它们全部水平justify-items 。此属性可以接受您在前两个挑战中学到的所有相同值，不同之处在于它会将网格中的所有项目移动到所需的对齐方式。
+
+有时你想让 CSS 网格中的网格项共享对齐方式。你可以像之前学习的那样分别设置它们的对齐方式，也可以对网格容器使用justify-items使它们一次性沿行轴对齐。对于这个属性你能使用在之前的两个挑战中学到的所有值，与之前不同的是，它将使网格中所有的网格项按所设置的方式对齐。 +
## Instructions -
使用此属性可以水平居中所有项目。
+
+使用justify-items属性设置所有网格项水平居中。 +
## Tests
```yml tests: - - text: container类应该有一个具有center值的justify-items属性。 - testString: 'assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi), "container class should have a justify-items property that has the value of center.");' + - text: 'container类应该有justify-items属性且值为center。' + testString: 'assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi));' ``` @@ -36,7 +41,7 @@ tests: .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5{background:PaleGreen;} - + .container { font-size: 40px; min-height: 300px; @@ -46,13 +51,13 @@ tests: 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 */ + /* 请在本行以下添加你的代码 */ + + + /* 请在本行以上添加你的代码 */ } - +
1
2
@@ -60,7 +65,6 @@ tests:
4
5
- ``` @@ -72,7 +76,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.chinese.md index 8886e5c873..39b3c2ceea 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.chinese.md @@ -2,23 +2,28 @@ id: 5a94fdf869fb03452672e45b title: Align All Items Vertically using align-items challengeType: 0 -videoUrl: '' -localeTitle: 使用align-items垂直对齐所有项目 +videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv' +forumTopicId: 301121 +localeTitle: 使用 align-items 垂直对齐所有项目 --- ## Description -
使用网格容器上的align-items属性将为网格中的所有项目设置垂直对齐方式。
+
+对网格容器使用align-items属性可以给网格中所有的网格项设置沿列轴对齐的方式。 +
## Instructions -
现在使用它将所有项目移动到每个单元格的末尾。
+
+请使用align-items属性将所有网格项移动到单元格的末尾。 +
## Tests
```yml tests: - - text: container类应该具有值为end的align-items属性。 - testString: 'assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi), "container class should have a align-items property that has the value of end.");' + - text: 'container类应该有align-items属性且值为end。' + testString: 'assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi));' ``` @@ -36,7 +41,7 @@ tests: .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5{background:PaleGreen;} - + .container { font-size: 40px; min-height: 300px; @@ -46,13 +51,13 @@ tests: 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 */ + /* 请在本行以下添加你的代码 */ + + + /* 请在本行以上添加你的代码 */ } - +
1
2
@@ -60,7 +65,6 @@ tests:
4
5
- ``` @@ -72,7 +76,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.chinese.md index 9a8afffbc5..ba176009bb 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.chinese.md @@ -2,23 +2,31 @@ id: 5a90374338fddaf9a66b5d3a title: Align an Item Horizontally using justify-self challengeType: 0 -videoUrl: '' -localeTitle: 使用justify-self水平对齐项目 +videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq' +forumTopicId: 301122 +localeTitle: 使用 justify-self 水平对齐项目 --- ## Description -
在CSS Grid中，每个项目的内容位于一个称为单元格的框中。您可以使用网格项上的justify-self属性水平对齐内容在其单元格中的位置。默认情况下，此属性的值为stretch ，这将使内容填充单元格的整个宽度。此CSS Grid属性也接受其他值： start ：对齐单元格左侧的内容， center ：对齐单元格center的内容， end ：对齐单元格右侧的内容。
+
+在 CSS 网格中，每个网格项的内容分别位于被称为单元格（cell）的框内。你可以使用网格项的justify-self属性，设置其内容的位置在单元格内沿行轴对齐的方式。默认情况下，这个属性的值是stretch，这将使内容占满整个单元格的宽度。该 CSS 网格属性也可以使用其他的值： +start：使内容在单元格左侧对齐， +center：使内容在单元格居中对齐， +end：使内容在单元格右侧对齐， +
## Instructions -
使用justify-self属性将项目与item2 。
+
+使用justify-self属性让类为item2的网格项居中。 +
## Tests
```yml tests: - - text: item2类应该有一个具有center值的justify-self属性。 - testString: 'assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi), "item2 class should have a justify-self property that has the value of center.");' + - text: 'item2类应该有justify-self属性且值为center。' + testString: 'assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi));' ``` @@ -32,19 +40,19 @@ tests: ```html - +
1
2
@@ -64,7 +72,6 @@ tests:
4
5
- ``` @@ -76,7 +83,11 @@ tests: ## Solution
+ + ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.chinese.md index 9a38f7b254..bf8dd506ec 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.chinese.md @@ -2,23 +2,28 @@ id: 5a90375238fddaf9a66b5d3b title: Align an Item Vertically using align-self challengeType: 0 -videoUrl: '' -localeTitle: 使用align-self垂直对齐项目 +videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz' +forumTopicId: 301123 +localeTitle: 使用 align-self 垂直对齐项目 --- ## Description -
正如您可以水平对齐项目一样，也可以垂直对齐项目。为此，您可以在项目上使用align-self属性。此属性接受来自上一次挑战的所有与justify-self相同的值。
+
+正如能设置网格项沿行轴对齐方式一样，也可以设置网格项沿列轴对齐：你可以对网格项使用align-self属性。在上一个挑战中适用于justify-self属性的每个值也都适用于align-self属性。 +
## Instructions -
对齐项目与类item3在垂直end 。
+
+用值end使类为item3的网格项底端对齐。 +
## Tests
```yml tests: - - text: item3类应该有一个align-self属性，其值为end 。 - testString: 'assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi), "item3 class should have a align-self property that has the value of end.");' + - text: 'item3类应该有align-self属性且值为end。' + testString: 'assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));' ``` @@ -33,18 +38,18 @@ tests: - +
1
2
@@ -64,7 +69,6 @@ tests:
4
5
- ``` @@ -76,7 +80,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.chinese.md index 4ed351c456..b5d525c99a 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.chinese.md @@ -2,23 +2,35 @@ id: 5a9036ee38fddaf9a66b5d35 title: Create a Column Gap Using grid-column-gap challengeType: 0 -videoUrl: '' -localeTitle: 使用grid-column-gap创建列间隙 +videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD' +forumTopicId: 301124 +localeTitle: 使用 grid-column-gap 创建多列之间的间距 --- ## Description -
到目前为止，在你创建的网格中，列都相互紧密相连。有时您希望列之间存在间隙。要在列之间添加间隙，请使用grid-column-gap属性，如下所示：
grid-column-gap：10px;
这会在我们所有列之间创建10px的空白空间。
+
+到目前为止，在你所建立的网格中列都相互紧挨着。如果需要在列与列之间添加一些间距，我们可以使用grid-column-gap： + + +```css +grid-column-gap: 10px; +``` + +这会在我们创建的所有列之间添加 10px 的空白间距。 +
## Instructions -
为网格中的列提供20px间隙。
+
+为网格中的列添加宽度为20px的间距。 +
## Tests
```yml tests: - - text: container类应该具有值为20px的grid-column-gap属性。 - testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi), "container class should have a grid-column-gap property that has the value of 20px.");' + - text: 'container类应该有grid-column-gap属性且值为20px。' + testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi));' ``` @@ -36,7 +48,7 @@ tests: .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;} - + .container { font-size: 40px; min-height: 300px; @@ -45,13 +57,13 @@ tests: 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 */ + /* 请在本行以下添加你的代码 */ + + + /* 请在本行以上添加你的代码 */ } - +
1
2
@@ -59,7 +71,6 @@ tests:
4
5
- ``` @@ -71,7 +82,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.chinese.md index 2e1e594a2c..f7717c5261 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.chinese.md @@ -2,23 +2,28 @@ id: 5a9036ee38fddaf9a66b5d36 title: Create a Row Gap using grid-row-gap challengeType: 0 -videoUrl: '' -localeTitle: 使用grid-row-gap创建行间隙 +videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv' +forumTopicId: 301125 +localeTitle: 使用 grid-row-gap 创建多行之间的间距 --- ## Description -
您可以使用grid-row-gap在grid-row-gap之间添加间隙，方法与在上一个挑战中的列之间添加间隙的方式相同。
+
+和上个挑战在两列之间添加间距一样，你可以用grid-row-gap在两行之间设置间距。 +
## Instructions -
为5px高的行创建间隙。
+
+为网格中的行添加高度为5px的间距。 +
## Tests
```yml tests: - - text: container类应该具有值为5px的grid-row-gap属性。 - testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi), "container class should have a grid-row-gap property that has the value of 5px.");' + - text: 'container类应该有grid-row-gap属性且值为5px。' + testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi));' ``` @@ -36,7 +41,7 @@ tests: .d3{background:PaleTurquoise;} .d4{background:LightPink;} .d5{background:PaleGreen;} - + .container { font-size: 40px; min-height: 300px; @@ -45,13 +50,13 @@ tests: 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 */ + /* 请在本行以下添加你的代码 */ + + + /* 请在本行以上添加你的代码 */ } - +
1
2
@@ -59,7 +64,6 @@ tests:
4
5
- ``` @@ -71,7 +75,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.chinese.md index f8073cbfea..d47b285196 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.chinese.md @@ -2,23 +2,36 @@ id: 5a94fe5469fb03452672e461 title: Create Flexible Layouts Using auto-fill challengeType: 0 -videoUrl: '' -localeTitle: 使用自动填充创建灵活布局 +videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW' +forumTopicId: 301126 +localeTitle: 使用 auto-fill 创建弹性布局 --- ## Description -
重复功能带有一个名为自动填充的选项。这允许您根据容器的大小自动插入所需大小的行或列。将auto-fill与minmax组合时，可以创建灵活的布局。在预览中， grid-template-columns设置为
重复（自动填充，minmax（60px，1fr））;
当容器改变大小时，此设置将继续插入60px列并拉伸它们，直到它可以插入另一个。 注意
如果您的容器无法将所有项目放在一行上，则会将它们移动到新行。
+
+重复方法带有一个名为自动填充（auto-fill）的功能。它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。你可以通过结合auto-fill和minmax来更灵活地布局。 +在最右侧的预览区中，grid-template-columns被设置为： + +```css +repeat(auto-fill, minmax(60px, 1fr)); +``` + +上面的代码效果：列的宽度会随容器大小改变，在可以插入一个 60px 宽的列之前，当前行的所有列会一直拉伸（译者注：动手试一下你就明白了）。 +注意：如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。 +
## Instructions -
在第一个网格中，使用带有repeat auto-fill以使用最小宽度为60px且最大为1fr列填充网格。然后调整预览大小以查看自动填充操作。
+
+在第一个网格中，用auto-fill和repeat来填充网格，其中列宽的最小值为60px，最大值为1fr。你可以调整最右侧的预览区大小，查看自动填充效果。 +
## Tests
```yml tests: - - text: container类应该具有grid-template-columns属性，其中包含repeat和auto-fill ，它将使用最小宽度为60px且最大为1fr列填充网格。 - 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), "container class should have a grid-template-columns property with repeat and auto-fill that will fill the grid with columns that have a minimum width of 60px and maximum of 1fr.");' + - text: 'container类应该有grid-template-columns属性且使用repeat和auto-fill，以便将最小宽度为60px，最大宽度为1fr的列填充至网格。' + 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));' ``` @@ -36,22 +49,22 @@ tests: .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; @@ -77,7 +90,6 @@ tests:
4
5
- ``` @@ -89,7 +101,10 @@ tests: ## Solution
-```js + +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.chinese.md index 1c543b3f3c..aebf7100c7 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.chinese.md @@ -2,23 +2,29 @@ id: 5a94fe6269fb03452672e462 title: Create Flexible Layouts Using auto-fit challengeType: 0 -videoUrl: '' -localeTitle: 使用自动调整创建灵活布局 +videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8' +forumTopicId: 301127 +localeTitle: 使用 auto-fit 创建弹性布局 --- ## Description -
auto-fit几乎与auto-fill相同。唯一的区别是，当容器的大小超过所有项目组合的大小时， auto-fill会继续插入空行或列并将项目推向一侧，而auto-fit折叠这些空行或列并将项目拉伸到适合容器的大小。 注意
如果您的容器无法将所有项目放在一行上，则会将它们移动到新行。
+
+auto-fit效果几乎和auto-fill一样。不同点仅在于，当容器的大小大于各网格项之和时，auto-fill将会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而auto-fit则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。 +注意：
如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。 +
## Instructions -
在第二个网格中，使用auto-fit repeat以使用最小宽度为60px且最大为1fr列填充网格。然后调整预览大小以查看差异。
+
+在第二个网格中，用auto-fit和repeat来填充网格，其中列宽的最小值为60px，最大值为1fr。你可以调整最右侧的预览区以查看差异。 +
## Tests
```yml tests: - - text: container2类应该具有grid-template-columns属性，该属性具有repeat和auto-fit ，它将使用最小宽度为60px且最大为1fr列填充网格。 - 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), "container2 class should have a grid-template-columns property with repeat and auto-fit that will fill the grid with columns that have a minimum width of 60px and maximum of 1fr.");' + - text: 'container2类应该有grid-template-columns属性，且使用repeat和auto-fit以便将最小宽度为60px，最大宽度为1fr的列放入网格。' + 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));' ``` @@ -36,34 +42,34 @@ tests: .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-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; } - +
1
2
@@ -78,7 +84,6 @@ tests:
4
5
- ``` @@ -90,7 +95,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-grids-within-grids.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-grids-within-grids.chinese.md index ae2e80a4d1..aa404e5cf3 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-grids-within-grids.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-grids-within-grids.chinese.md @@ -2,25 +2,31 @@ id: 5a94fe8569fb03452672e464 title: Create Grids within Grids challengeType: 0 -videoUrl: '' +videoUrl: 'https://scrimba.com/p/pByETK/c6N78Ap' +forumTopicId: 301128 localeTitle: 在网格中创建网格 --- ## Description -
将元素转换为网格只会影响其直接后代的行为。因此，通过将直接后代转换为网格，您在网格中有一个网格。例如，通过使用item3类设置元素的display和grid-template-columns属性，可以在网格中创建网格。
+
+将元素转换为网格只会影响其子代元素。因此，在把某个子代元素设置为网格后，就会得到一个嵌套的网格。 +例如，设置类为item3的元素的display和grid-template-columns属性，就会得到一个嵌套的网格。 +
## Instructions -
使用item3类将元素转换为网格，其中两列的宽度为auto ， 1fr使用display和grid-template-columns 。
+
+用display和grid-template-columns，使类为item3元素转换为有两列且宽度为auto和1fr的网格。 +
## Tests
```yml tests: - - text: item3类应该有一个grid-template-columns属性，其中auto和1fr作为值。 - testString: 'assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi), "item3 class should have a grid-template-columns property with auto and 1fr as values.");' - - text: item3类应该具有grid值的display属性。 - testString: 'assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), "item3 class should have a display property with the value of grid.");' + - text: 'item3类应该有grid-template-columns属性且值为auto和1fr。' + testString: 'assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi));' + - text: 'item3类有display属性且值为grid。' + testString: 'assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));' ``` @@ -51,36 +57,36 @@ tests: 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; } - + - +
header
advert
@@ -90,7 +96,6 @@ tests:
footer
- ``` @@ -102,7 +107,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-your-first-css-grid.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-your-first-css-grid.chinese.md index 807922e7a0..74ab26ffeb 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-your-first-css-grid.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/create-your-first-css-grid.chinese.md @@ -2,23 +2,29 @@ id: 5a858944d96184f06fd60d61 title: Create Your First CSS Grid challengeType: 0 -videoUrl: '' -localeTitle: 创建您的第一个CSS网格 +videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4' +forumTopicId: 301129 +localeTitle: 创建你的第一个 CSS 网格 --- ## Description -
通过它的设置可以将任何HTML元素成格子容器display属性设置为grid 。这使您能够使用与CSS Grid关联的所有其他属性。 注意
在CSS Grid中，父元素称为容器 ，其子元素称为item 。
+
+通过将属性display的值设为grid，使 HTML 元素变为网格容器。通过前面的操作，你可以对该容器使用与 CSS 网格（CSS Grid）相关的属性。 +注意：
在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。 +
## Instructions -
将container类的div显示更改为grid 。
+
+将类为container的 div 的display属性改为grid。 +
## Tests
```yml tests: - - text: container类应该具有值为grid的display属性。 - testString: 'assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi), "container class should have a display property with a value of grid.");' + - text: 'container类应该有display属性且值为grid。' + testString: 'assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));' ``` @@ -36,18 +42,18 @@ tests: .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 */ + /* 请在本行以下添加你的代码 */ + + + /* 请在本行以上添加你的代码 */ } - +
1
2
@@ -55,7 +61,6 @@ tests:
4
5
- ``` @@ -67,7 +72,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.chinese.md index 4d129509c1..62badce525 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.chinese.md @@ -2,23 +2,39 @@ id: 5a94fe0569fb03452672e45c title: Divide the Grid Into an Area Template challengeType: 0 -videoUrl: '' +videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy' +forumTopicId: 301130 localeTitle: 将网格划分为区域模板 --- ## Description -
您可以将网格的单元格组合到一个区域中，并为该区域指定自定义名称。通过在容器上使用grid-template-areas来执行此操作，如下所示：
网格模板方面：
“标题标题”
“广告内容内容”
“页脚页脚”;
上面的代码将前三个单元格合并为一个名为header的区域，将底部的三个单元格合并为一个footer区域，并在中间行中生成两个区域; advert和content 。 注意
代码中的每个单词代表一个单元格，每对引号代表一行。除自定义标签外，您还可以使用句点（ . ）指定网格中的空单元格。
+
+你可以将网格中的一些网格单元格组合成一个区域（area），并为该区域指定一个自定义名称。你可以通过给容器加上grid-template-areas来实现： + +```css +grid-template-areas: + "header header header" + "advert content content" + "footer footer footer"; +``` + +上面的代码将顶部三个单元格合并成一个名为header的区域，将底部三个单元格合并为一个名为footer的区域，并在中间行生成两个区域————advert和content。 +注意：
在代码中，每个单词代表一个网格单元格，每对引号代表一行。 +除了自定义标签，你还能使用句点（.）来表示一个空单元格。 +
## Instructions -
放置区域模板，以便标记为advert的单元格变为空单元格。
+
+请放置区域模板，让名为advert的区域变成空单元格。 +
## Tests
```yml tests: - - text: container类应该具有类似于预览但具有的grid-template-areas属性.而不是advert区域。 - 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), "container class should have a grid-template-areas propertiy similar to the preview but has . instead of the advert area.");' + - text: 'container类应该有类似于最右侧预览区的grid-template-areas属性且用.代替advert。' + 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));' ``` @@ -36,7 +52,7 @@ tests: .item3{background:PaleTurquoise;} .item4{background:LightPink;} .item5{background:PaleGreen;} - + .container { font-size: 40px; min-height: 300px; @@ -46,16 +62,16 @@ tests: 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 */ + /* 请修改本行以上的代码 */ } - +
1
2
@@ -63,7 +79,6 @@ tests:
4
5
- ``` @@ -75,7 +90,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.chinese.md index c43a910ab6..3409b16bea 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.chinese.md @@ -2,23 +2,34 @@ id: 5a94fe4469fb03452672e460 title: Limit Item Size Using the minmax Function challengeType: 0 -videoUrl: '' -localeTitle: 限制项目大小使用minmax功能 +videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv' +forumTopicId: 301131 +localeTitle: 使用 minmax 函数限制项目大小 --- ## Description -
还有另一个内置函数可用于grid-template-columns和grid-template-rows称为minmax 。当网格容器改变大小时，它用于限制项目的大小。为此，您需要指定项目的可接受尺寸范围。这是一个例子：
grid-template-columns：100px minmax（50px，200px）;
在上面的代码中， grid-template-columns设置为创建两列;第一个是100px宽，第二个是最小宽度50px，最大宽度是200px。
+
+此外，内置函数minmax也可以可用于设置grid-template-columns和grid-template-rows的值。它的作用是在网格容器改变大小时限制网格项的大小。为此，你需要指定网格项允许的尺寸范围。例如： + +```css +grid-template-columns: 100px minmax(50px, 200px); +``` + +在上面的代码中，通过grid-template-columns添加两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。 +
## Instructions -
使用minmax函数，将repeat函数中的1fr替换为最小宽度为90px且最大宽度为1fr的列大小，并调整预览面板的大小以查看效果。
+
+用minmax函数替换repeat函数中的1fr，限定其最小值为90px，最大值为1fr，你可以调整最右侧的预览面板查看效果。 +
## Tests
```yml tests: - - text: container类应具有grid-template-columns属性，该属性设置为重复3列，最小宽度为90px ，最大宽度为1fr 。 - 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), "container class should have a grid-template-columns property that is set to repeat 3 columns with the minimum width of 90px and maximum width of 1fr.");' + - text: 'container类应该有grid-template-columns属性且设置重复 3 列，每列宽度最小值为90px，最大值为1fr。' + 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));' ``` @@ -36,23 +47,23 @@ tests: .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; } - +
1
2
@@ -60,7 +71,6 @@ tests:
4
5
- ``` @@ -72,7 +82,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.chinese.md index cafc3b04ef..f40a4f2b70 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.chinese.md @@ -2,23 +2,36 @@ id: 5a94fe1369fb03452672e45d title: Place Items in Grid Areas Using the grid-area Property challengeType: 0 -videoUrl: '' -localeTitle: 使用网格区域属性在网格区域中放置项目 +videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV' +forumTopicId: 301132 +localeTitle: 使用 grid-area 属性将项目放置在网格区域中 --- ## Description -
为网格容器创建区域模板后，如上一个挑战所示，您可以通过引用您提供的名称将项目放入自定义区域。为此，您可以在项目上使用grid-area属性，如下所示：
.item1 {grid-area：header; }
这使网格知道您希望item1类进入名为header的区域。在这种情况下，该项将使用整个顶行，因为整行被命名为标题区域。
+
+像上一个挑战那样，在为网格添加区域模板后，你可以通过引用你所定义的区域的名称，将元素放入相应的区域。为此，你需要对网格项使用grid-area： + +```css +.item1 { + grid-area: header; +} +``` + +这样，类名为item1的网格项就被放到了header区域里。在这个示例中，网格项将占用整个顶行，因为这一整行都被命名为 header 区域。 +
## Instructions -
使用grid-area属性将具有item5类的元素放置在footer区域中。
+
+请使用grid-area属性，把类为item5元素放到footer区域。 +
## Tests
```yml tests: - - text: item5类应该有一个grid-area属性，其值为footer 。 - testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi), "item5 class should have a grid-area property that has the value of footer.");' + - text: 'item5类应该有grid-area属性且值为footer。' + testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));' ``` @@ -35,15 +48,15 @@ tests: .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; @@ -53,13 +66,13 @@ tests: grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; - grid-template-areas: + grid-template-areas: "header header header" "advert content content" "footer footer footer"; } - +
1
2
@@ -67,7 +80,6 @@ tests:
4
5
- ``` @@ -79,7 +91,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.chinese.md index 6ac680e61f..cfbd02ad4c 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.chinese.md @@ -2,23 +2,48 @@ id: 5a94fe3669fb03452672e45f title: Reduce Repetition Using the repeat Function challengeType: 0 -videoUrl: '' -localeTitle: 使用重复功能减少重复 +videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR' +forumTopicId: 301133 +localeTitle: 使用 repeat 函数减少重复 --- ## Description -
使用grid-template-columns和grid-template-rows定义网格结构时，为所创建的每个行或列输入了一个值。让我们说你想要一个100行相同高度的网格。单独插入100个值是不太实际的。幸运的是，有一种更好的方法 - 使用repeat函数指定要重复列或行的次数，后跟逗号和要重复的值。这是一个创建100行网格的示例，每行高度为50px。
grid-template-rows：repeat（100,50px）;
您还可以使用repeat函数重复多个值，并在定义网格结构时将该函数插入其他值中。这就是我的意思：
grid-template-columns：repeat（2,1fr 50px）20px;
这意味着：
grid-template-columns：1fr 50px 1fr 50px 20px;
注意
1fr 50px重复两次，然后是20px。
+
+当使用grid-template-columns和grid-template-rows定义网格结构时，你需要为添加的每一行和每一列都输入一个值。 +如果一个网格共有 100 行，每行高度相同，就得输入 100 个值，这不太实际。幸运的是，有一种更好的方法——使用repeat方法指定行或列的重复次数，后面加上逗号以及需要重复的值。 +这里有一个添加 100 行网格的例子，使每行高度均为 50px： + +```css +grid-template-rows: repeat(100, 50px); +``` + +你还可以用 repeat 方法重复多个值，并在定义网格结构时与其他值一起使用。举个例子： + +```css +grid-template-columns: repeat(2, 1fr 50px) 20px; +``` + +效果相当于： + +```css +grid-template-columns: 1fr 50px 1fr 50px 20px; +``` + +注意：
1fr 50px重复了两次，后面跟着 20px。 +
## Instructions -
使用repeat从grid-template-columns属性中删除重复。
+
+用repeat代替grid-template-columns属性值中的重复代码。 +
## Tests
```yml tests: - - text: container类应具有grid-template-columns属性，该属性设置为重复3列，宽度为1fr 。 - 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), "container class should have a grid-template-columns property that is set to repeat 3 columns with the width of 1fr.");' + - text: 'container类应该带有grid-template-columns属性且设置为重复 3 列，宽为1fr。' + 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));' ``` @@ -36,23 +61,23 @@ tests: .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; } - +
1
2
@@ -60,7 +85,6 @@ tests:
4
5
- ``` @@ -72,7 +96,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.chinese.md index 8f0fce3f4e..763d154a91 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.chinese.md @@ -2,27 +2,38 @@ id: 5a9036ee38fddaf9a66b5d34 title: Use CSS Grid units to Change the Size of Columns and Rows challengeType: 0 -videoUrl: '' -localeTitle: 使用CSS网格单位更改网格列和网格行的大小 +videoUrl: 'https://scrimba.com/p/pByETK/cvE8phd' +forumTopicId: 301134 +localeTitle: 使用 CSS 网格单位来更改列和行的大小 --- ## Description -
您可以在CSS Grid中使用绝对性和相对性的单位（列如px和em）来定义网格行和网格列的大小。您也可以使用这些： -fr ：将网格列或网格行设置为可用空间的一小部分 -auto ：将网格列或网格行设置为其内容的宽度或高度 -% ：将网格列或网格行调整为对应它的容器高宽度的百分比。 -这是输出下面预览的代码：
grid-template-columns：auto 50px 10％2fr 1fr;
此代码段创建了五个网格列。第一个网格列与其内容一样宽，第二个网格列是50px，第三个网格列是其容器的10％。到最后两个网格列时，剩下的空间被分为三个部分，两个部分配给第四个网格列，一个部分配配给第五个网格列。
+
+在 CSS 网格中，可以使用绝对定位和相对定位单位如px和em来确定行或列的大小。下面的单位也可以使用： +fr：设置列或行占剩余空间的一个比例， +auto：设置列宽或行高自动等于它的内容的宽度或高度， +%：将列或行调整为它的容器宽度或高度的百分比， +最右侧的预览区中的效果通过下面的代码实现： + +```css +grid-template-columns: auto 50px 10% 2fr 1fr; +``` + +这段代码添加了五个列。第一列的宽与它的内容宽度相等；第二列宽 50px；第三列宽是它容器的 10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。 +
## Instructions -
创建一个包含三列的网格，其宽度如下：1fr，100px和2fr。
+
+生成一个包含三列的网格，每列宽度分别为：1fr，100px，和 2fr。 +
## Tests
```yml tests: - - text: 'container类应该有一个grid-template-columns属性，该属性有三列，宽度如下： 1fr, 100px, and 2fr 。' - testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi), "container class should have a grid-template-columns property that has three columns with the following widths: 1fr, 100px, and 2fr.");' + - text: 'container类应该有grid-template-columns属性，且生成宽为1fr, 100px和2fr的三列。' + testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi));' ``` @@ -40,21 +51,21 @@ tests: .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; } - +
1
2
@@ -62,7 +73,6 @@ tests:
4
5
- ``` @@ -74,7 +84,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.chinese.md index f4b26604dc..8d051d0248 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.chinese.md @@ -2,23 +2,40 @@ id: 5a94fe2669fb03452672e45e title: Use grid-area Without Creating an Areas Template challengeType: 0 -videoUrl: '' -localeTitle: 在不创建网格区域模板的情况下使用网格区域 +videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK' +forumTopicId: 301135 +localeTitle: 使用 grid-area 创建区域模板 --- ## Description -
您在上一次挑战中学习的grid-area属性可以以其他方式使用。如果您的网格没有可引用的网格区域模板，您可以当场创建一个网格区域来放置项目，例如：
item1 {grid-area：1/1/2/4; }
这个区域用了您之前刚学过的网格行号来定义项目的地点。上例中的数字的意思是：
grid-area (网格区域)：水平线开始于/垂直线开始于/水平线结束于/垂直线结束于;
因此，示例中的项目将使用第一个网格横线和第2个网格横线之间的网格行以及第一个网格纵线和第四个网格纵线之间的网格列。
+
+你在上一次挑战中学到的grid-area属性有另一种使用方式。如果网格中没有定义区域模板，你也可以像这样为它添加一个模板： + +```css +item1 { grid-area: 1/1/2/4; } +``` + +这里使用了你之前学习的网格线编号来定义网格项的区域。上例中数字代表这些值： + +```css +grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at; +``` + +因此，示例中的网格项将占用第 1 条水平网格线（起始）和第 2 条水平网格线（终止）之间的行，及第 1 条垂直网格线（起始）和第 4 条垂直网格线（终止）之间的列。 +
## Instructions -
使用grid-area属性，将带item5class的元素放置到第三和第四条网格横线之间以及第一条和第四条网格纵线之间。
+
+请用grid-area属性将类为item5的元素放置在第 3 条和第 4 条水平网格线及第 1 条和第 4 条水平网格线之间的区域内。 +
## Tests
```yml tests: - - text: item5类应具有grid-area属性，使其位于第三和第四水平线之间以及第一和第四垂直线之间。 - 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), "item5类应具有grid-area属性，使其位于第三和第四水平线之间以及第一和第四垂直线之间。");' + - text: 'item5类应该有grid-area属性且值为3/1/4/4。' + 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));' ``` @@ -35,15 +52,15 @@ tests: .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; @@ -55,7 +72,7 @@ tests: grid-gap: 10px; } - +
1
2
@@ -63,7 +80,6 @@ tests:
4
5
- ``` @@ -75,7 +91,10 @@ tests: ## Solution
+ ```js // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.chinese.md index a05ea12912..2703073f7f 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.chinese.md @@ -2,23 +2,47 @@ id: 5a90372638fddaf9a66b5d38 title: Use grid-column to Control Spacing challengeType: 0 -videoUrl: '' -localeTitle: 使用grid-column(网格列)控制间距 +videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr' +forumTopicId: 301136 +localeTitle: 使用 grid-column 来控制空间大小 --- ## Description -
到目前为止，所讨论的所有属性都是针对网格容器的。 grid-column属性是第一个用于网格项本身的属性。网格的水平线和垂直线被称为line 。这些线在网格的左上角从1号线开始，从左向右，从上向下移动。3x3的网格线条是这个样子：

列线

1

2

3

4

横向线

1

2

3

4

如果要控制项目是怎么占用的列数的话，您可以在grid-column属性后面加入您希望的项目开始和结束的网格线号。例如：
grid-column：1/3;
这将会让使项目从左侧第一条网格垂直线开始，一直延伸到网格的第3条线，占据两个网格列。
+
+到目前为止，所有的讨论都是围绕网格容器的。grid-column属性是第一个用于网格项本身的属性。 +网格的假想水平线和垂直线被称为线（lines）。这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。 +这是一个 3x3 网格的线条： +

column lines

1

2

3

4

row lines

1

2

3

4

+你可以用grid-column属性定义网格项开始和结束的位置，进而控制每个网格项占用的列数。 +示例如下： + +```css +grid-column: 1 / 3; +``` + +这会让网格项从左侧第一条线开始到第三条线结束，占用两列。 +
## Instructions -
使用item5class使项目占据网络格的最后两列。
+
+使类为item5的网格项占用网格的最后两列。 +
## Tests
```yml tests: - - text: item5类应该有一个grid-column具有的值属性2 / 4 - testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-column\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), "item5 class should have a grid-column property that has the value of 2 / 4.");' + - text: 'item5类应该有grid-column属性且其值为2 / 4。' + testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-column\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi));' + - text: 'item5 类应该有 grid-column 属性使其占用网格最后两列。' + 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)); + " ``` @@ -35,15 +59,15 @@ tests: .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; @@ -55,7 +79,7 @@ tests: grid-gap: 10px; } - +
1
2
@@ -63,19 +87,18 @@ tests:
4
5
- ``` - - -
## Solution
-```js + +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.chinese.md index a49cc63162..74eb995de5 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.chinese.md @@ -2,23 +2,36 @@ id: 5a90373638fddaf9a66b5d39 title: Use grid-row to Control Spacing challengeType: 0 -videoUrl: '' -localeTitle: 使用网格行控制间距 +videoUrl: 'https://scrimba.com/p/pByETK/c9WBLU4' +forumTopicId: 301137 +localeTitle: 使用 grid-row 来控制空间大小 --- ## Description -
当然，像网格列一样，您也可以使一个项目同时占据多个网格行。您可以使用grid-row属性来定义项目开始和结束的网格行。
+
+当然，和设置一个网格项占用多列一样，你也可以设置它占用多行。你可以使用grid-row属性来定义一个网格项开始和结束的水平线。 +
## Instructions -
让带有item5class选择器的元素占有最后两排网格行。
+
+使类为item5的元素占用最后两行。 +
## Tests
```yml tests: - - text: item5class应该有一个具有2 / 4值属性的grid-row. - testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi), "item5 class should have a grid-row property that has the value of 2 / 4.");' + - text: 'item5类应该有grid-row属性且值为2 / 4。' + testString: 'assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi));' + - text: 'item5 class 应该有 grid-row 属性使其占用网格最后两行。' + 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)); + " ``` @@ -35,16 +48,16 @@ tests: .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; @@ -56,7 +69,7 @@ tests: grid-gap: 10px; } - +
1
2
@@ -64,7 +77,6 @@ tests:
4
5
- ``` @@ -76,7 +88,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file diff --git a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.chinese.md b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.chinese.md index 77fd74e0d6..b94174ea9a 100644 --- a/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.chinese.md +++ b/curriculum/challenges/chinese/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.chinese.md @@ -2,23 +2,29 @@ id: 5a94fe7769fb03452672e463 title: Use Media Queries to Create Responsive Layouts challengeType: 0 -videoUrl: '' -localeTitle: 使用media queries创建响应式布局 +videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk' +forumTopicId: 301138 +localeTitle: 使用媒体查询创建响应式布局 --- ## Description -
您可以使用CSS Grid的media queries来使您的网站布局具有响应式的特征。media queries可以用于重新排列网格区域，更改网格尺寸的大小以及重新排列项目。在预览中，当视口宽度为300px或更大时，网格列数将会从1变为2.然后广告区域会完全占据左列。
+
+通过使用媒体查询重新排列网格区域，更改网格尺寸以及重新排列网格项位置，CSS 网格能轻松地使网站更具响应性。 +在最右侧的预览区中，当网页可视区域的宽不小于 300px 时，列数从 1 变为 2。并且，广告（advertisement）区域完全占据左列。 +
## Instructions -
当视口宽度为400px或更大时，使标题区域完全占据顶行，页脚区域完全占据底行。
+
+当网页可视区域的宽不小于400px时，使 header 区域完全占据最顶行，footer 区域完全占据最底行。 +
## Tests
```yml tests: - - text: 当视口为400px或更多时， container类应具有grid-template-areas属性，其中页脚和标题区域分别占据顶行和底行，而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 400px or more, container class should have a grid-template-areas 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.");' + - text: '当网页可视区域的宽在400px及以上时，container类应该带有grid-template-areas属性且能够使得 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));' ``` @@ -35,22 +41,22 @@ tests: 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; @@ -66,7 +72,7 @@ tests: "content" "footer"; } - + @media (min-width: 300px){ .container{ grid-template-columns: auto 1fr; @@ -77,28 +83,27 @@ tests: "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 */ + + /* 请修改本行以上的代码*/ } } - +
header
advert
content
footer
- ``` @@ -110,7 +115,9 @@ tests: ## Solution
-```js +```html // solution required ``` +
+ \ No newline at end of file