chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -9,7 +9,7 @@ dashedName: add-columns-with-grid-template-columns
|
||||
|
||||
# --description--
|
||||
|
||||
简单地添加一个网格元素并不会有任何明显的效果。你还需要明确网格的结构。在一个网格容器中使用 `grid-template-columns` 属性可以添加一些列，示例如下：
|
||||
简单地添加一个网格元素并不会有任何明显的效果。 你还需要明确网格的结构。 在一个网格容器中使用 `grid-template-columns` 属性可以添加一些列，示例如下：
|
||||
|
||||
```css
|
||||
.container {
|
||||
@ -18,7 +18,7 @@ dashedName: add-columns-with-grid-template-columns
|
||||
}
|
||||
```
|
||||
|
||||
上面的代码会在网格容器中添加两列，宽度均为 50px。`grid-template-columns` 属性值的个数表示网格的列数，每个值表示相应的列宽度。
|
||||
上面的代码会在网格容器中添加两列，宽度均为 50px。 `grid-template-columns` 属性值的个数表示网格的列数，每个值表示相应的列宽度。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -55,7 +55,7 @@ assert(
|
||||
display: grid;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,13 +3,13 @@ id: 5a9036ee38fddaf9a66b5d37
|
||||
title: 使用 grid-gap 为网格添加间距
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv'
|
||||
forumTopicId: 1301118
|
||||
forumTopicId: 301118
|
||||
dashedName: add-gaps-faster-with-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` 只有一个值，那么这个值表示行与行之间、列与列之间的间距均为这个值。 如果有两个值，那么第一个值表示行间距，第二个值表示列间距。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -49,7 +49,7 @@ assert(
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: add-rows-with-grid-template-rows
|
||||
|
||||
# --description--
|
||||
|
||||
在上个挑战中，你创建的网格会自动设置行数。你可以用 `grid-template-rows` 设置网格的行，就像用 `grid-template-columns` 设置网格的列那样。
|
||||
在上个挑战中，你创建的网格会自动设置行数。 你可以用 `grid-template-rows` 设置网格的行，就像用 `grid-template-columns` 设置网格的列那样。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
grid-template-columns: 100px 100px 100px;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,11 +9,11 @@ dashedName: align-all-items-horizontally-using-justify-items
|
||||
|
||||
# --description--
|
||||
|
||||
有时你想让 CSS 网格中的网格项共享对齐方式。你可以像之前学习的那样分别设置它们的对齐方式，也可以对网格容器使用 `justify-items` 使它们一次性沿水平轴对齐。这个属性能接受我们在之前两个挑战中学到的所有值作为属性值，但与之前不同的是，它会将网格中**所有**的网格项按所设置的方式对齐。
|
||||
有时你想让 CSS 网格中的网格项共享对齐方式。 你可以像之前学习的那样分别设置它们的对齐方式，也可以对网格容器使用 `justify-items` 使它们一次性沿水平轴对齐。 这个属性能接受我们在之前两个挑战中学到的所有值作为属性值，但与之前不同的是，它会将网格中**所有**的网格项按所设置的方式对齐。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请使用 `justify-items` 属性设置所有网格项水平居中。
|
||||
请使用这个属性设置所有网格项水平居中。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -50,7 +50,7 @@ assert(
|
||||
grid-gap: 10px;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,7 +13,7 @@ dashedName: align-all-items-vertically-using-align-items
|
||||
|
||||
# --instructions--
|
||||
|
||||
请使用 `align-items` 属性将所有网格项移动到单元格的末尾。
|
||||
请使用这个属性将所有网格项移动到单元格的末尾。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -48,7 +48,7 @@ assert(
|
||||
grid-gap: 10px;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: align-an-item-horizontally-using-justify-self
|
||||
|
||||
# --description--
|
||||
|
||||
在 CSS 网格中，每个网格项的内容分别位于被称为<dfn>单元格（cell）</dfn>的框内。你可以使用网格项的 `justify-self` 属性，设置其内容的位置在单元格内沿水平轴的对齐方式。默认情况下，这个属性的值是 `stretch`，这将使内容占满整个单元格的宽度。该 CSS 网格属性也可以使用其他的值：
|
||||
在 CSS 网格中，每个网格项的内容分别位于被称为<dfn>单元格（cell）</dfn>的框内。 你可以使用网格项的 `justify-self` 属性，设置其内容的位置在单元格内沿水平轴的对齐方式。 默认情况下，这个属性的值是 `stretch`，这将使内容占满整个单元格的宽度。 该 CSS 网格属性也可以使用其他的值：
|
||||
|
||||
`start`：使内容在单元格左侧对齐，
|
||||
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
background: LightSalmon;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: align-an-item-vertically-using-align-self
|
||||
|
||||
# --description--
|
||||
|
||||
正如能设置网格项沿水平方向的对齐方式一样，我们也可以设置网格项沿竖直方向的对齐方式。为此，我们可以对网格项使用 `align-self` 属性来实现。在上一个挑战中适用于 `justify-self` 属性的属性值同样也可用于 `align-self`。
|
||||
正如能设置网格项沿水平方向的对齐方式一样，我们也可以设置网格项沿竖直方向的对齐方式。 为此，我们可以对网格项使用 `align-self` 属性来实现。 在上一个挑战中适用于 `justify-self` 属性的属性值同样也可用于这个属性。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -36,7 +36,7 @@ assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
||||
background: PaleTurquoise;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: create-a-column-gap-using-grid-column-gap
|
||||
|
||||
# --description--
|
||||
|
||||
目前为止，在你所创建的网格中，每列都相互紧挨着。如果需要在列与列之间添加一些间距，我们可以使用 `grid-column-gap`：
|
||||
目前为止，在你所创建的网格中，每列都相互紧挨着。 有时候你想要列之间有一个间距。 如果需要在列与列之间添加一些间距，我们可以使用 `grid-column-gap`：
|
||||
|
||||
```css
|
||||
grid-column-gap: 10px;
|
||||
@ -55,7 +55,7 @@ assert(
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,19 +9,17 @@ dashedName: create-flexible-layouts-using-auto-fill
|
||||
|
||||
# --description--
|
||||
|
||||
`repeat` 方法带有一个名为<dfn>自动填充（auto-fill）</dfn>的功能。它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。你可以通过结合 `auto-fill` 和 `minmax` 来更灵活地布局。
|
||||
|
||||
在最右侧的预览区中，`grid-template-columns` 被设置为：
|
||||
repeat 方法带有一个名为<dfn>自动填充（auto-fill）</dfn>的功能。 它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。 你可以通过结合 `auto-fill` 和 `minmax` 来更灵活地布局。
|
||||
|
||||
```css
|
||||
repeat(auto-fill, minmax(60px, 1fr));
|
||||
```
|
||||
|
||||
上面的代码效果是这样：首先，列的宽度会随容器大小改变。其次，只要容器宽度不足以插入一个宽为 60px 的列，当前行的所有列就都会一直拉伸。请自己调整宽度，动手试一下就不难理解了。**注意：**如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。
|
||||
上面的代码效果是这样：首先，列的宽度会随容器大小改变。其次，只要容器宽度不足以插入一个宽为 60px 的列，当前行的所有列就都会一直拉伸。请自己调整宽度，动手试一下就不难理解了。 **注意：**如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。
|
||||
|
||||
# --instructions--
|
||||
|
||||
在第一个网格中，请使用 `auto-fill` 和 `repeat` 来填充网格。其中列宽的最小值为 `60px`，最大值为 `1fr`。你可以调整最右侧的预览区大小，查看自动填充的效果。
|
||||
在第一个网格中，请使用 `auto-fill` 和 `repeat` 来填充网格。 其中列宽的最小值为 `60px`，最大值为 `1fr`。 你可以调整最右侧的预览区大小，查看自动填充的效果。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -98,7 +96,7 @@ assert(
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
@ -106,14 +104,14 @@ assert(
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
|
||||
.container2 {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: create-flexible-layouts-using-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`。 你可以调整最右侧的预览区来查看效果。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -2,14 +2,13 @@
|
||||
id: 5a94fe8569fb03452672e464
|
||||
title: 在网格中创建网格
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c6N78Ap'
|
||||
forumTopicId: 301128
|
||||
dashedName: create-grids-within-grids
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
将元素转换为网格只会影响其子元素（即直接后代元素，英文为 `direct descendants`。意思是一个元素的所有后代元素中，父级元素为该元素的所有元素）。因此，如果我们把某个子元素设置为网格，就会得到一个嵌套的网格。
|
||||
将元素转换为网格只会影响其子元素（即直接后代元素，英文为 direct descendants。意思是一个元素的所有后代元素中，父级元素为该元素的所有元素）。 因此，如果我们把某个子元素设置为网格，就会得到一个嵌套的网格。
|
||||
|
||||
例如，如果我们设置 class 为 `item3` 的元素的 `display` 和 `grid-template-columns` 属性，就会得到一个嵌套的网格。
|
||||
|
||||
|
||||
@ -9,17 +9,17 @@ dashedName: create-your-first-css-grid
|
||||
|
||||
# --description--
|
||||
|
||||
通过将属性 `display` 的值设为 `grid`，HTML 元素就可以变为网格容器。通过前面的操作，你可以对该容器使用与 CSS 网格（CSS Grid）相关的属性。
|
||||
通过将属性 `display` 的值设为 `grid`，HTML 元素就可以变为网格容器。 通过前面的操作，你可以对该容器使用与 CSS 网格（CSS Grid）相关的属性。
|
||||
|
||||
**注意：**在 CSS 网格中，父元素称为<dfn>容器（container）</dfn>，它的子元素称为<dfn>项（items）</dfn>。
|
||||
|
||||
# --instructions--
|
||||
|
||||
请将 class 为 `container` 的 `div` 的 `display` 属性值设置为 `grid`。
|
||||
请将 class 为 `container` 的 div 的 display 属性值设置为 `grid`。
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `container` 的 `div` 元素应具有 `display` 属性且属性值应为 `grid`。
|
||||
`container` class 应具有 `display` 属性，属性值应为 `grid`。
|
||||
|
||||
```js
|
||||
assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
@ -43,7 +43,7 @@ assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
background: LightGray;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: divide-the-grid-into-an-area-template
|
||||
|
||||
# --description--
|
||||
|
||||
你可以将网格中的一些单元格组合成一个<dfn>区域（area）</dfn>，并为该区域指定一个自定义名称。可以通过给容器加上 `grid-template-areas` 来实现：
|
||||
你可以将网格中的一些单元格组合成一个<dfn>区域（area）</dfn>，并为该区域指定一个自定义名称。 可以通过给容器加上 `grid-template-areas` 来实现：
|
||||
|
||||
```css
|
||||
grid-template-areas:
|
||||
@ -18,7 +18,7 @@ grid-template-areas:
|
||||
"footer footer footer";
|
||||
```
|
||||
|
||||
上面的代码将顶部三个单元格合并成一个名为 `header` 的区域，将底部三个单元格合并为一个名为 `footer` 的区域，并在中间行创建了两个区域：`advert` 和 `content`。**注意：**在代码中，每个单词代表一个网格单元格，每对引号代表一行。除了自定义标签，你还能使用句点（`.`）来表示一个空单元格。
|
||||
上面的代码将顶部三个单元格合并成一个名为 `header` 的区域，将底部三个单元格合并为一个名为 `footer` 的区域，并在中间行创建了两个区域：`advert` 和 `content`。 **注意：**在代码中，每个单词代表一个网格单元格，每对引号代表一行。 除了自定义标签，你还能使用句点（`.`）来表示一个空单元格。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -26,13 +26,15 @@ grid-template-areas:
|
||||
|
||||
# --hints--
|
||||
|
||||
class 为 `container` 的元素应具有 `grid-template-areas` 属性，在其属性值中，应使用 `.` 代替 `.advert`。
|
||||
class 为 `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
|
||||
)
|
||||
__helpers
|
||||
.removeCssComments(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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: limit-item-size-using-the-minmax-function
|
||||
|
||||
# --description--
|
||||
|
||||
此外，内置函数 `minmax` 也可用于设置 `grid-template-columns` 和 `grid-template-rows` 的值。它的作用是在网格容器改变大小时限制网格项的大小。为此，你需要指定网格项允许的尺寸范围。例如：
|
||||
此外，内置函数 `minmax` 也可用于设置 `grid-template-columns` 和 `grid-template-rows` 的值。 它的作用是在网格容器改变大小时限制网格项的大小。 为此，你需要指定网格项允许的尺寸范围。 例如：
|
||||
|
||||
```css
|
||||
grid-template-columns: 100px minmax(50px, 200px);
|
||||
@ -19,7 +19,7 @@ grid-template-columns: 100px minmax(50px, 200px);
|
||||
|
||||
# --instructions--
|
||||
|
||||
请用 `minmax` 函数替换 `repeat` 函数中的 `1fr`，限定其最小值为 `90px`，最大值为`1fr`。你可以调整最右侧的预览面板查看效果。
|
||||
请用 `minmax` 函数替换 `repeat` 函数中的 `1fr`，限定其最小值为 `90px`，最大值为`1fr`。 你可以调整最右侧的预览面板查看效果。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property
|
||||
|
||||
# --description--
|
||||
|
||||
像上一个挑战那样，在为网格添加区域模板后，你可以通过引用你所定义的区域的名称，将元素放入相应的区域。为此，你需要对网格项使用 `grid-area`：
|
||||
像上一个挑战那样，在为网格添加区域模板后，你可以通过引用你所定义的区域的名称，将元素放入相应的区域。 为此，你需要对网格项使用 `grid-area`：
|
||||
|
||||
```css
|
||||
.item1 {
|
||||
@ -17,7 +17,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property
|
||||
}
|
||||
```
|
||||
|
||||
这样，class 为 `item1` 的网格项就被放到了 `header` 区域里。在这个示例中，网格项将占用第一行整行，因为这一整行都被命名为 `header` 区域。
|
||||
这样，class 为 `item1` 的网格项就被放到了 `header` 区域里。 在这个示例中，网格项将占用第一行整行，因为这一整行都被命名为标题区域。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -28,7 +28,11 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property
|
||||
class 为 `item5` 的元素应具有 `grid-area` 属性且属性值应为 `footer`。
|
||||
|
||||
```js
|
||||
assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -46,7 +50,7 @@ assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));
|
||||
background: PaleGreen;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: reduce-repetition-using-the-repeat-function
|
||||
|
||||
使用 `grid-template-columns` 或 `grid-template-rows` 定义网格结构时，你需要为添加的每一行或每一列都输入一个值。
|
||||
|
||||
如果一个网格共有 100 行且每行高度相同，那我们就需要输入 100 个值，这显然不太实际。为此，更好的方式是使用 `repeat` 方法指定行或列的重复次数，后面加上逗号以及需要重复的值。
|
||||
如果一个网格共有 100 行且每行高度相同， 那我们就需要输入 100 个值，这显然不太实际。 为此，更好的方式是使用 `repeat` 方法指定行或列的重复次数，后面加上逗号以及需要重复的值。
|
||||
|
||||
以下为添加 100 行网格的例子，每行高度均为 50px：
|
||||
|
||||
@ -19,7 +19,7 @@ dashedName: reduce-repetition-using-the-repeat-function
|
||||
grid-template-rows: repeat(100, 50px);
|
||||
```
|
||||
|
||||
你还可以用 repeat 方法重复多个值，并在定义网格结构时与其他值一起使用。比如：
|
||||
你还可以用 repeat 方法重复多个值，并在定义网格结构时与其他值一起使用。 比如：
|
||||
|
||||
```css
|
||||
grid-template-columns: repeat(2, 1fr 50px) 20px;
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: use-css-grid-units-to-change-the-size-of-columns-and-rows
|
||||
|
||||
# --description--
|
||||
|
||||
在 CSS 网格中，可以使用绝对单位（如 `px`）或相对单位（如 `em`）来定义行或列的大小。下面的单位也可以使用：
|
||||
在 CSS 网格中，可以使用绝对单位（如 `px`）或相对单位（如 `em`）来定义行或列的大小。 下面的单位也可以使用：
|
||||
|
||||
`fr`：设置列或行占剩余空间的比例，
|
||||
|
||||
@ -23,7 +23,7 @@ dashedName: use-css-grid-units-to-change-the-size-of-columns-and-rows
|
||||
grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
```
|
||||
|
||||
这段代码添加了五个列。第一列的宽与它的内容宽度相等；第二列宽 50px；第三列宽是它容器的 10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。
|
||||
这段代码添加了五个列。 第一列的宽与它的内容宽度相等；第二列宽 50px；第三列宽是它容器的 10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -9,27 +9,27 @@ dashedName: use-grid-area-without-creating-an-areas-template
|
||||
|
||||
# --description--
|
||||
|
||||
我们在上一次挑战中学到的 `grid-area` 属性还有另一种使用方式。如果网格中没有定义区域模板，你也可以像这样为它添加一个模板：
|
||||
我们在上一次挑战中学到的 `grid-area` 属性还有另一种使用方式。 如果网格中没有定义区域模板，你也可以像这样为它添加一个模板：
|
||||
|
||||
```css
|
||||
item1 { grid-area: 1/1/2/4; }
|
||||
```
|
||||
|
||||
这里使用了你之前学习的网格线编号来定义网格项的区域。上例中数字代表这些值：
|
||||
这里使用了你之前学习的网格线编号来定义网格项的区域。 上例中数字代表这些值：
|
||||
|
||||
```css
|
||||
grid-area: 起始的水平网格线 / 起始的垂直网格线 / 结束的水平网格线 / 结束的垂直网格线;
|
||||
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` 属性将 `class` 为 `item5` 的元素放置在第 3 条和第 4 条水平网格线，以及第 1 条和第 4 条垂直网格线之间的区域内。
|
||||
请用 `grid-area` 属性将 class 为 `item5` 的元素放置在第 3 条和第 4 条水平网格线，以及第 1 条和第 4 条垂直网格线之间的区域内。
|
||||
|
||||
# --hints--
|
||||
|
||||
`class` 为 `item5` 的元素应具有 `grid-area` 属性且属性值应为 `3/1/4/4`。
|
||||
class 为 `item5` 的元素应具有 `grid-area` 属性，且位于水平第三和第四条线、垂直第一和第四条线之间的区域。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -9,13 +9,13 @@ dashedName: use-grid-column-to-control-spacing
|
||||
|
||||
# --description--
|
||||
|
||||
到目前为止，所有的讨论都是围绕网格容器的。`grid-column` 属性是我们要讨论的，第一个用于网格项本身的属性。
|
||||
到目前为止，所有的讨论都是围绕网格容器的。 `grid-column` 属性是我们要讨论的，第一个用于网格项本身的属性。
|
||||
|
||||
网格中，假想的水平线和垂直线被称为<dfn>线（lines）</dfn>。这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。
|
||||
网格中，假想的水平线和垂直线被称为<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>
|
||||
<div style='position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;'><p style='left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;'>列线</p><p style='left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>1</p><p style='left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>2</p><p style='left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>3</p><p style='left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>4</p><p style='left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;'>行线</p><p style='left:-10%;top:-10%;font-size:130%;position:absolute;'>1</p><p style='left:-10%;top:21%;font-size:130%;position:absolute;'>2</p><p style='left:-10%;top:53%;font-size:130%;position:absolute;'>3</p><p style='left:-10%;top:85%;font-size:130%;position:absolute;'>4</p><div style='left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;'></div></div>
|
||||
|
||||
你可以用 `grid-column` 属性定义网格项开始和结束的位置，进而控制每个网格项占用的列数。
|
||||
|
||||
@ -37,9 +37,8 @@ class 为 `item5` 的元素应具有 `grid-column` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('style')
|
||||
.text()
|
||||
.replace(/\s/g, '')
|
||||
__helpers
|
||||
.removeWhiteSpace($('style').text())
|
||||
.match(/\.item5{.*grid-column:.*}/g)
|
||||
);
|
||||
```
|
||||
|
||||
@ -9,7 +9,7 @@ dashedName: use-grid-row-to-control-spacing
|
||||
|
||||
# --description--
|
||||
|
||||
和设置一个网格项占用多列类似，你也可以设置它占用多行。你可以使用 `grid-row` 属性来定义一个网格项开始和结束的水平线。
|
||||
和设置一个网格项占用多列类似，你也可以设置它占用多行。 你可以使用 `grid-row` 属性来定义一个网格项开始和结束的水平线。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -21,10 +21,7 @@ class 为 `item5` 的元素应具有 `grid-row` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('style')
|
||||
.text()
|
||||
.replace(/\s/g, '')
|
||||
.match(/\.item5{.*grid-row:.*}/g)
|
||||
__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: use-media-queries-to-create-responsive-layouts
|
||||
|
||||
将 CSS 网格与使用媒体查询结合使用，如使用媒体查询重新排列网格区域、更改网格尺寸以及重新排列网格项位置，我们可以让制作出的网站更具响应性。
|
||||
|
||||
在右侧的预览区中，当网页可视区域的宽不小于 300px 时，列数从 1 变为 2。并且，广告（advertisement）区域会完全占据左列。
|
||||
在右侧的预览区中，当网页可视区域的宽不小于 300px 时，列数从 1 变为 2。 并且，广告（advertisement）区域会完全占据左列。
|
||||
|
||||
# --instructions--
|
||||
|
||||
@ -23,9 +23,11 @@ dashedName: use-media-queries-to-create-responsive-layouts
|
||||
|
||||
```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
|
||||
)
|
||||
__helpers
|
||||
.removeCssComments(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
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user