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 354c2bca90..a05ea12912 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 @@ -3,14 +3,14 @@ id: 5a90372638fddaf9a66b5d38 title: Use grid-column to Control Spacing challengeType: 0 videoUrl: '' -localeTitle: 使用grid-column控制间距 +localeTitle: 使用grid-column(网格列)控制间距 --- ## Description -
到目前为止,所讨论的所有属性都是针对网格容器的。 grid-column属性是第一个用于网格项本身的属性。创建网格的假设水平和垂直线称为线 。这些线在网格的左上角从1开始编号,向右移动列,向下移动行,向上计数。这就是3x3网格的线条:

列线

1

2

3

4

行线

1

2

3

4

要控制项目将使用的列数,您可以将grid-column属性与您希望项目开始和停止的行号一起使用。这是一个例子:
grid-column:1/3;
这将使项目从左侧网格的第一条垂直线开始,并跨越网格的第3条线,消耗两列。
+
到目前为止,所讨论的所有属性都是针对网格容器的。 grid-column属性是第一个用于网格项本身的属性。网格的水平线和垂直线被称为line 。这些线在网格的左上角从1号线开始,从左向右,从上向下移动。3x3的网格线条是这个样子:

列线

1

2

3

4

横向线

1

2

3

4

如果要控制项目是怎么占用的列数的话,您可以在grid-column属性后面加入您希望的项目开始和结束的网格线号。例如:
grid-column:1/3;
这将会让使项目从左侧第一条网格垂直线开始,一直延伸到网格的第3条线,占据两个网格列。
## Instructions -
使用类item5使项目消耗网格的最后两列。
+
使用item5class使项目占据网络格的最后两列。
## Tests