当其他列只有一个项目时，如何对一列中的项目数组使用网格布局？

Question

我正在学习在CSS中使用网格，但是我不知道如何进行以下布局。我有这样的数据：

const data = {
  name: "someName",
  array: [
    {name: "someItem", value: someInteger},
    ...
  ],
  total: someInteger
}

我想这样显示：

   3fr        3fr                1fr           1fr
+------+-----------------+------------------+-------+
| name | array[0].name   | array[0].value   |       | auto
+------+-----------------+------------------+-------| 
|      | array[i].name   | array[i].value   |       | auto
+------+-----------------+------------------+-------|
|      | array[n-1].name | array[n-1].value | total | auto
+------+-----------------+------------------+-------+

我正在为项目使用React。以上所有项目均为div元素。

Answer 1

该解决方案显示了一个示例，该示例如何在不使用ReactJS的情况下使用JS来实现。弄清楚如何使用ReactJS进行相同操作（如果您确实需要）将不是问题。

https://codepen.io/chumakoff/pen/LYYVebb

css：

#wrapper {
  display: grid;
  grid-template-columns: 3fr 3fr 1fr 1fr;
}

html：

<div id="wrapper"></div>

JS：

const wrapper = document.getElementById("wrapper");

const nameDiv = document.createElement("div");
nameDiv.innerText = data.name;
wrapper.appendChild(nameDiv);  

data.array.forEach((item, index) => {
  const nameDiv = document.createElement("div");
  nameDiv.innerText = item.name;
  wrapper.appendChild(nameDiv);

  const valueDiv = document.createElement("div");
  valueDiv.innerText = item.value;
  wrapper.appendChild(valueDiv);

  if (index != data.array.length - 1) {
    wrapper.appendChild(document.createElement("div"));
    wrapper.appendChild(document.createElement("div"));
  }
})

const totalDiv = document.createElement("div");
totalDiv.innerText = data.total;
wrapper.appendChild(totalDiv);