--- id: 5a90372638fddaf9a66b5d38 challengeType: 0 videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr' forumTopicId: 301136 title: 使用 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($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-column:.*}/g)); - 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 ```