Curious situation when entering grid-area with Javascript

Question

I am inserting some stylizations in a little project that I am doing, and I have a foreach running in the DOM to go through a list, it turns out that if I add a grid-area and put the Dice as grid area value, it replicates the value 4 times. Perhaps by text is not very understandable, I will demonstrate in the code:

document.querySelectorAll('ul li').forEach((element, indice) => {
  element.style.cssText = `grid-area: item${indice}`
})

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width; 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  grid-gap: 15px;
  grid-template-areas: "item0 item2 item3" "item4 item5 item6"
}

li {
  list-style: none;
  border: 1px dashed;
}

<ul>
  <li>Teste 1</li>
  <li>Teste 2</li>
  <li>Teste 3</li>
  <li>Teste 4</li>
  <li>Teste 5</li>
  <li>Teste 6</li>
</ul>

What he returns to me is this:

<ul>
  <li style="grid-area: item0 / item0 / item0 / item0;">Teste 1</li>
  <li style="grid-area: item1 / item1 / item1 / item1;">Teste 2</li>
  <li style="grid-area: item2 / item2 / item2 / item2;">Teste 3</li>
  <li style="grid-area: item3 / item3 / item3 / item3;">Teste 4</li>
  <li style="grid-area: item4 / item4 / item4 / item4;">Teste 5</li>
  <li style="grid-area: item5 / item5 / item5 / item5;">Teste 6</li>
</ul>

Why does he do it item0 / item0 / item0 / item0, if the foreach returns the Indice in parameter 2?

Answer 1

The Grid works as a Cartesian plane, where each cell has a X/Y initial and a X/Y end. So it repeats 4x, in fact it is putting the value to x inicial / y inicial / x final / y final.

If you want to get around this you can put the style using the setAttribut and placing the index as the grid-area as below

document.querySelectorAll('ul li').forEach((element, i) => {
    element.setAttribute("style", "grid-area: item"+[i])
})

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width; 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  grid-gap: 15px;
  grid-template-areas: "item0 item2 item3" "item4 item5 item6"
}

li {
  list-style: none;
  border: 1px dashed;
}

<ul>
  <li>Teste 1</li>
  <li>Teste 2</li>
  <li>Teste 3</li>
  <li>Teste 4</li>
  <li>Teste 5</li>
  <li>Teste 6</li>
</ul>

The result in the DOM would be like this:

<ul>
    <li style="grid-area: item0">Teste 1</li>
    <li style="grid-area: item1">Teste 2</li>
    <li style="grid-area: item2">Teste 3</li>
    <li style="grid-area: item3">Teste 4</li>
    <li style="grid-area: item4">Teste 5</li>
    <li style="grid-area: item5">Teste 6</li>
</ul>

---

For educational purposes only

This area would be grid-area: 1 / 1 / 2 / 2;