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

Question

我正在用普通的js和css网格做一个记忆游戏。我已经看到了使用flex-box的解决方案，但是我想用css-grid代替它。我现在面临的挑战是使用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：

    <div class="grid-container" id="grid">
        <div class="grid-item">
            <img src="img/2.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/1.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/3.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/5.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/6.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/7.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/8.jpg" class="frot-face"/>
        </div>
        <div class="grid-item">
            <img src="img/9.jpg" class="frot-face"/>
        </div>
    </div>

CSS：

  .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;
  }

Answer 1

我已经解决了这个问题。我的代码不能工作的主要原因是我滥用了gridArea属性。与CSS grid-area属性不同，在JS(或DOM)中，该属性不用于为网格项分配名称。相反，它是

用作网格行开始、网格列开始、网格行结束和网格列结束属性的简写属性。

参考资料：https://www.w3schools.com/cssref/pr_grid-area.asp或https://www.w3docs.com/learn-css/grid-area.html。我的最后代码如下：

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：

 .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;
  }