---
id: 5a90372638fddaf9a66b5d38
title: 使用 grid-column 來控制空間大小
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr'
forumTopicId: 301136
dashedName: use-grid-column-to-control-spacing
---
# --description--
到目前爲止，所有的討論都是圍繞網格容器的。 `grid-column` 屬性是我們要討論的，第一個用於網格項本身的屬性。
網格中，假想的水平線和垂直線被稱爲線（lines）。 這些線在網格的左上角從 1 開始編號，垂直線向右、水平線向下累加計數。
這是一個 3x3 網格的線條：
要設置一個網格項佔據幾列，你可以使用 `grid-column` 屬性加上網格線條的編號來定義網格項開始和結束的位置。
示例如下：
```css
grid-column: 1 / 3;
```
這會讓網格項從左側第一條線開始到第三條線結束，佔用兩列。
# --instructions--
請讓 class 爲 `item5` 的網格項佔用網格的最後兩列。
# --hints--
class 爲 `item5` 的元素應具有 `grid-column` 屬性。
```js
assert(
__helpers
.removeWhiteSpace($('style').text())
.match(/\.item5{.*grid-column:.*}/g)
);
```
class 爲 `item5` 的元素應具有 `grid-column` 屬性，其屬性值應將元素設置爲佔用網格的最後兩列。
```js
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));
```
# --seed--
## --seed-contents--
```html
```
# --solutions--
```html
```