---
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;
```
これにより、アイテムはグリッドの 1 番左の垂直線から始まり、グリッドの 3 番目の線まで拡張し、2 つの列を消費します。
# --instructions--
クラス `item5` のアイテムがグリッドの最後の 2 列を消費するようにしてください。
# --hints--
`item5` クラスが `grid-column` プロパティを持つようにしてください。
```js
assert(
__helpers
.removeWhiteSpace($('style').text())
.match(/\.item5{.*grid-column:.*}/g)
);
```
`item5` クラスの `grid-column` プロパティは、グリッドの最後の 2 列を消費するように設定される必要があります。
```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
```