grid-template-columns属性，如下所示： 。容器 {这将为您的网格提供两列，每列50px宽。给
显示：网格;
grid-template-columns：50px 50px;
}
grid-template-columns属性的参数数量表示grid-template-columns数，每个参数的值表示每列的宽度。 grid-template-columns属性可以添加一些列，示例如下：
+
+```css
+.container {
+ display: grid;
+ grid-template-columns: 50px 50px;
+}
+```
+
+上面的代码可以在网格容器中添加两列，宽度均为 50px。
+grid-template-columns属性值的个数表示网格的列数，而每个值表示对应列的宽度。
+100px宽。 100px。
+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 */
+ /* 请在本行以下添加你的代码 */
+
+
+ /* 请在本行以上添加你的代码 */
}
-
+
grid-gap是grid-row-gap和grid-column-gap grid-gap的简写属性，来自前两个更方便使用的挑战。如果grid-gap有一个值，它将在所有行和列之间创建一个间隙。但是，如果有两个值，它将使用第一个值来设置行之间的间隙和列的第二个值。 grid-gap属性是前两个挑战中的grid-row-gap属性和grid-column-gap属性的简写，它更方便使用。如果grid-gap只有一个值，那么这个值表示行与行之间、列与列之间的间距。如果grid-gap有两个值，那么第一个值表示行间距，第二个值表示列间距。
+grid-gap在行之间引入10px间隙，在列之间引入20px间隙。 grid-gap属性设置行间距为10px，设置列间距为20px。
+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 */
+ /* 请在本行以下添加你的代码 */
+
+
+ /* 请在本行以上添加你的代码 */
}
grid-template-rows属性，方法grid-template-columns在先前挑战中使用grid-template-columns方式相同。 grid-template-columns设置网格的列一样，用grid-template-rows设置网格的行。
+50px 。 50px。
+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 */
+ /* 请在本行以下添加你的代码 */
+
+
+ /* 请在本行以上添加你的代码 */
}
-
+
justify-items将它们全部水平justify-items 。此属性可以接受您在前两个挑战中学到的所有相同值，不同之处在于它会将网格中的所有项目移动到所需的对齐方式。 justify-items使它们一次性沿行轴对齐。对于这个属性你能使用在之前的两个挑战中学到的所有值，与之前不同的是，它将使网格中所有的网格项按所设置的方式对齐。
+justify-items属性设置所有网格项水平居中。
+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 */
+ /* 请在本行以下添加你的代码 */
+
+
+ /* 请在本行以上添加你的代码 */
}
-
+
align-items属性将为网格中的所有项目设置垂直对齐方式。 align-items属性可以给网格中所有的网格项设置沿列轴对齐的方式。
+align-items属性将所有网格项移动到单元格的末尾。
+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 */
+ /* 请在本行以下添加你的代码 */
+
+
+ /* 请在本行以上添加你的代码 */
}
-
+
justify-self属性水平对齐内容在其单元格中的位置。默认情况下，此属性的值为stretch ，这将使内容填充单元格的整个宽度。此CSS Grid属性也接受其他值： start ：对齐单元格左侧的内容， center ：对齐单元格center的内容， end ：对齐单元格右侧的内容。 justify-self属性，设置其内容的位置在单元格内沿行轴对齐的方式。默认情况下，这个属性的值是stretch，这将使内容占满整个单元格的宽度。该 CSS 网格属性也可以使用其他的值：
+start：使内容在单元格左侧对齐，
+center：使内容在单元格居中对齐，
+end：使内容在单元格右侧对齐，
+justify-self属性将项目与item2 。 justify-self属性让类为item2的网格项居中。
+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
-
+
align-self属性。此属性接受来自上一次挑战的所有与justify-self相同的值。 align-self属性。在上一个挑战中适用于justify-self属性的每个值也都适用于align-self属性。
+item3在垂直end 。 end使类为item3的网格项底端对齐。
+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:
-
+
grid-column-gap属性，如下所示： grid-column-gap：10px;这会在我们所有列之间创建10px的空白空间。
grid-column-gap：
+
+
+```css
+grid-column-gap: 10px;
+```
+
+这会在我们创建的所有列之间添加 10px 的空白间距。
+20px间隙。 20px的间距。
+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 */
+ /* 请在本行以下添加你的代码 */
+
+
+ /* 请在本行以上添加你的代码 */
}
-
+
grid-row-gap在grid-row-gap之间添加间隙，方法与在上一个挑战中的列之间添加间隙的方式相同。 grid-row-gap在两行之间设置间距。
+5px高的行创建间隙。 5px的间距。
+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 */
+ /* 请在本行以下添加你的代码 */
+
+
+ /* 请在本行以上添加你的代码 */
}
-
+
auto-fill与minmax组合时，可以创建灵活的布局。在预览中， grid-template-columns设置为重复（自动填充，minmax（60px，1fr））;当容器改变大小时，此设置将继续插入60px列并拉伸它们，直到它可以插入另一个。 注意
auto-fill和minmax来更灵活地布局。
+在最右侧的预览区中，grid-template-columns被设置为：
+
+```css
+repeat(auto-fill, minmax(60px, 1fr));
+```
+
+上面的代码效果：列的宽度会随容器大小改变，在可以插入一个 60px 宽的列之前，当前行的所有列会一直拉伸（译者注：动手试一下你就明白了）。
+注意：如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。
+repeat auto-fill以使用最小宽度为60px且最大为1fr列填充网格。然后调整预览大小以查看自动填充操作。 auto-fill和repeat来填充网格，其中列宽的最小值为60px，最大值为1fr。你可以调整最右侧的预览区大小，查看自动填充效果。
+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:
auto-fit几乎与auto-fill相同。唯一的区别是，当容器的大小超过所有项目组合的大小时， auto-fill会继续插入空行或列并将项目推向一侧，而auto-fit折叠这些空行或列并将项目拉伸到适合容器的大小。 注意 auto-fit效果几乎和auto-fill一样。不同点仅在于，当容器的大小大于各网格项之和时，auto-fill将会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而auto-fit则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
+注意：auto-fit repeat以使用最小宽度为60px且最大为1fr列填充网格。然后调整预览大小以查看差异。 auto-fit和repeat来填充网格，其中列宽的最小值为60px，最大值为1fr。你可以调整最右侧的预览区以查看差异。
+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;
}
-
+
item3类设置元素的display和grid-template-columns属性，可以在网格中创建网格。 item3的元素的display和grid-template-columns属性，就会得到一个嵌套的网格。
+item3类将元素转换为网格，其中两列的宽度为auto ， 1fr使用display和grid-template-columns 。 display和grid-template-columns，使类为item3元素转换为有两列且宽度为auto和1fr的网格。
+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;
}
-
+
-
+
display属性设置为grid 。这使您能够使用与CSS Grid关联的所有其他属性。 注意 display的值设为grid，使 HTML 元素变为网格容器。通过前面的操作，你可以对该容器使用与 CSS 网格（CSS Grid）相关的属性。
+注意：container类的div显示更改为grid 。 container的 div 的display属性改为grid。
+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 */
+ /* 请在本行以下添加你的代码 */
+
+
+ /* 请在本行以上添加你的代码 */
}
-
+
grid-template-areas来执行此操作，如下所示： 网格模板方面：上面的代码将前三个单元格合并为一个名为
“标题标题”
“广告内容内容”
“页脚页脚”;
header的区域，将底部的三个单元格合并为一个footer区域，并在中间行中生成两个区域; advert和content 。 注意 . ）指定网格中的空单元格。 grid-template-areas来实现：
+
+```css
+grid-template-areas:
+ "header header header"
+ "advert content content"
+ "footer footer footer";
+```
+
+上面的代码将顶部三个单元格合并成一个名为header的区域，将底部三个单元格合并为一个名为footer的区域，并在中间行生成两个区域————advert和content。
+注意：.）来表示一个空单元格。
+advert的单元格变为空单元格。 advert的区域变成空单元格。
+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 */
+ /* 请修改本行以上的代码 */
}
-
+
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。
+minmax函数，将repeat函数中的1fr替换为最小宽度为90px且最大宽度为1fr的列大小，并调整预览面板的大小以查看效果。 minmax函数替换repeat函数中的1fr，限定其最小值为90px，最大值为1fr，你可以调整最右侧的预览面板查看效果。
+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;
}
-
+
grid-area属性，如下所示： .item1 {grid-area：header; }这使网格知道您希望
item1类进入名为header的区域。在这种情况下，该项将使用整个顶行，因为整行被命名为标题区域。 grid-area：
+
+```css
+.item1 {
+ grid-area: header;
+}
+```
+
+这样，类名为item1的网格项就被放到了header区域里。在这个示例中，网格项将占用整个顶行，因为这一整行都被命名为 header 区域。
+grid-area属性将具有item5类的元素放置在footer区域中。 grid-area属性，把类为item5元素放到footer区域。
+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";
}
-
+
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。
+repeat从grid-template-columns属性中删除重复。 repeat代替grid-template-columns属性值中的重复代码。
+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;
}
-
+
px和em）来定义网格行和网格列的大小。您也可以使用这些：
-fr ：将网格列或网格行设置为可用空间的一小部分
-auto ：将网格列或网格行设置为其内容的宽度或高度
-% ：将网格列或网格行调整为对应它的容器高宽度的百分比。
-这是输出下面预览的代码： grid-template-columns：auto 50px 10％2fr 1fr;此代码段创建了五个网格列。第一个网格列与其内容一样宽，第二个网格列是50px，第三个网格列是其容器的10％。到最后两个网格列时，剩下的空间被分为三个部分，两个部分配给第四个网格列，一个部分配配给第五个网格列。
px和em来确定行或列的大小。下面的单位也可以使用：
+fr：设置列或行占剩余空间的一个比例，
+auto：设置列宽或行高自动等于它的内容的宽度或高度，
+%：将列或行调整为它的容器宽度或高度的百分比，
+最右侧的预览区中的效果通过下面的代码实现：
+
+```css
+grid-template-columns: auto 50px 10% 2fr 1fr;
+```
+
+这段代码添加了五个列。第一列的宽与它的内容宽度相等；第二列宽 50px；第三列宽是它容器的 10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。
+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;
}
-
+
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 条垂直网格线（终止）之间的列。
+grid-area属性，将带item5class的元素放置到第三和第四条网格横线之间以及第一条和第四条网格纵线之间。 grid-area属性将类为item5的元素放置在第 3 条和第 4 条水平网格线及第 1 条和第 4 条水平网格线之间的区域内。
+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;
}
-
+
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;
+```
+
+这会让网格项从左侧第一条线开始到第三条线结束，占用两列。
+item5class使项目占据网络格的最后两列。 item5的网格项占用网格的最后两列。
+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;
}
-
+
grid-row属性来定义项目开始和结束的网格行。 grid-row属性来定义一个网格项开始和结束的水平线。
+item5class选择器的元素占有最后两排网格行。 item5的元素占用最后两行。
+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;
}
-
+
400px或更大时，使标题区域完全占据顶行，页脚区域完全占据底行。 400px时，使 header 区域完全占据最顶行，footer 区域完全占据最底行。
+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 */
+
+ /* 请修改本行以上的代码*/
}
}
-
+