如何使用javascript将css网格元素放置到网格容器中

我正在用简单的js和css网格做一个记忆游戏。我见过FlexBox的解决方案，但我想用css网格来代替。我现在面临的挑战是使用javascript将网格元素放入网格容器中。我知道如何在css中实现，但无法在js中实现。到目前为止，我尝试了以下方法，但没有成功：

const fillGrid = () => {
    let i = 1;
    document.getElementsByClassName('grid-item').forEach(element => {
        element.style.gridArea = `block${i++}`;
        document.getElementById('grid').appendChild(element);
    });
}

fillGrid();

我的意图是为javascript中的每个网格项分配“网格区域”属性，同时将css网格的其余属性保留在css部分中。我想使用javascript，因为我想动态更改每个元素的位置

HTML:

---

我已经解决了这个问题。我的代码不起作用的主要原因是我误用了

gridArea

属性。与CSS

网格区域

属性不同，在JS（或DOM）中，此属性不用于为网格项指定名称。而是

用作网格行开始的速记属性， 网格列开始、网格行结束和网格列结束属性

参考：或。 我的最终代码如下所示：

const fillGrid = () => {
    let col = 1, row = 1;
    const items = [...document.getElementsByClassName('grid-item')];
    const grid = document.getElementById('grid');
    items.forEach(item => {
        item.style.gridArea = `${row} / ${col}`;
        col++;
        if(col>4){
          col=1;
          row++;
        }
    });
}

fillGrid();

CSS:

---

似乎通过js设置网格区域总是输出

网格区域的速记值：value/value/value/value@AbeCaymo谢谢你的帮助！
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas: 'block1 block2 block3 block4' 'block5 block6 block7 block8' 'block1 block2 block3 block4' 'block5 block6 block7 block8';
    padding: 3em 2em 3em 2em;
    grid-gap: 1em;
    width: 73vmin;
    margin: auto;
    border-radius: 10px;
  }

const fillGrid = () => {
    let col = 1, row = 1;
    const items = [...document.getElementsByClassName('grid-item')];
    const grid = document.getElementById('grid');
    items.forEach(item => {
        item.style.gridArea = `${row} / ${col}`;
        col++;
        if(col>4){
          col=1;
          row++;
        }
    });
}

fillGrid();

 .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

    padding: 3em 2em 3em 2em;
    grid-gap: 1em;
    width: 73vmin;
    margin: auto;
    border-radius: 10px;
    border: 2px solid black;
  }

  img{
    width: 100px;
    height: 100px;
  }