--- 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

linhas de linha (row)

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

```