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

【问题标题】：How to use grid layout for array of items in one column when other columns have only one item?当其他列只有一个项目时，如何对一列中的项目数组使用网格布局？
【发布时间】：2019-10-09 10:49:09
【问题描述】：

我正在学习在 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元素。

【问题讨论】：

我不会在这里推荐 CSS-Grid...这似乎是 table，使用它会更有意义。
建议的 HTML 输出在这里会很有用，
好吧，我也不知道如何使用表格来做到这一点
那么这不是您的问题，我想您首先需要知道如何提取值并对其进行处理:) 除非您这样做并且没有显示它

标签： css reactjs css-grid

【解决方案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);

【讨论】：