Почему grid-area через js вставляется несколько раз?

Question

[konstantinst13]

Почему-то через цикл css-свойство grid-area устанавливается несколько раз и оно получается равно: grid-area: sales_twin_1 / sales_twin_1 / sales_twin_1 / sales_twin_1; (и так с каждым элементом из цикла)

А мне нужно. чтобы grid-area = sales_twin_1;

В чём проблема, как это исправить?

Вот мой скрипт:

const tableArticlesClones = document.querySelectorAll('.twin');
      
       tableArticlesClones.forEach((item, index) => {
           const dataId = item.getAttribute('data-id');
           
          
           item.style.gridArea = dataId; 
            console.log('item.style.gridArea:');
           console.log(item.style.gridArea); //Пишет: sales_twin_1 / sales_twin_1 / sales_twin_1 / sales_twin_1.
           //т.е. он выдаёт: dataId / dataId / dataId / dataId
           //а мне нужно, чтобы gridArea = sales_twin_1, т.е. gridArea = dataId (и так с каждым dataId)
           
       });

Я решил эту проблему:
Просто нужно устанавливать в JS значение для grid-area через атрибут style.

item.setAttribute('style', `grid-area: ${dataId}`)

Comments

[Kovalsky]

Ну значит в 'data-id' у каждого tableArticlesClones лежит "dataId / dataId / dataId / dataId"

[konstantinst13]

Kovalsky, нет, я проверял и с простыми словами вместо data-id, и с другими css-свойствами. Такое поведение есть только у gridArea при любом значении...

[Kovalsky]

konstantinst13, а сделайте пример на jsfiddle или codepen

[konstantinst13]

Kovalsky, благодарю за внимание, я уже решил эту проблему

Answer 1

[sergski]

Потому что grid-area задает положение элемента в сетке по горизонтали и вертикали. Те браузер получает значение dataId, и в соответствии с моделью grid говорит вам -- "помещу этот элемент в 1 колонку и закончу в 1 колонке, помещу 1 строку и закончу в 1 строке".