--- id: 5a90372638fddaf9a66b5d38 title: Використовуйте grid-стовпець для контролю інтервалів 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-- Зробіть так, щоб елемент класу `item5` використав дві останні колонки. # --hints-- `item5` клас повинен мати властивість `grid-column`. ```js assert( __helpers .removeWhiteSpace($('style').text()) .match(/\.item5{.*grid-column:.*}/g) ); ``` `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

```