--- id: 5a90372638fddaf9a66b5d38 title: Use grid-column to Control Spacing challengeType: 0 videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr' forumTopicId: 301136 localeTitle: 使用 grid-column 来控制空间大小 --- ## Description
到目前为止,所有的讨论都是围绕网格容器的。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
使类为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));' - 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)); " ```
## Challenge Seed
```html
1
2
3
4
5
```
## Solution
```html // solution required ```