---
id: 5a90372638fddaf9a66b5d38
title: Usar grid-column para controlar a posição das colunas
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr'
forumTopicId: 301136
dashedName: use-grid-column-to-control-spacing
---
# --description--
Até este ponto, todas as propriedades que foram discutidas são destinadas para o grid container. A propriedade `grid-column` é usada nos grid items.
As linhas horizontais e verticais que criam o grid são chamadas de linhas (lines). Essas linhas são numeradas começando com 1 no canto superior esquerdo do grid e movem para a direita para colunas e para baixo para linhas.
Esta é a aparência das linhas em um grid 3x3:
linhas de coluna
1
2
3
4
linhas de linha (row)
1
2
3
4
Para controlar a quantidade de colunas que um item ocupará, você pode usar a propriedade `grid-column` definindo o número da linha em que deseja que o item comece e pare.
Exemplo:
```css
grid-column: 1 / 3;
```
Isso fará com que o item comece na primeira linha vertical o grid à esquerda e se estenda até a 3ª linha do grid, ocupando duas colunas.
# --instructions--
Faça com que o item com a classe `item5` ocupe as duas últimas colunas do grid.
# --hints--
O elemento de classe `item5` deve ter a propriedade `grid-column`.
```js
assert(
__helpers
.removeWhiteSpace($('style').text())
.match(/\.item5{.*grid-column:.*}/g)
);
```
O elemento de classe `item5` deve ter a propriedade `grid-column` definida para que o elemento ocupe as duas últimas colunas do grid.
```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
```