如何将网格渲染为表格答案

【问题标题】：how to render a grid as like table如何将网格渲染为表格
【发布时间】：2020-01-21 14:41:59
【问题描述】：

需要像表格格式一样渲染网格，例如我有两行最初后跟下面的css：

第 1 步：

.grid-container {
  display: grid;
  grid-template-columns: auto;
  background-color: #2196F3;
  padding: 10px;
}

输出：

我动态地添加了一列，但它只呈现在其正确的下方，但我需要逐行渲染该列，css 中是否存在任何棘手的问题。请指导实现的方法。

我有一个想法，那就是基于顺序会像任何其他选项一样渲染网格，

第 2 步：

.grid-container {
      display: grid;
      grid-template-columns: auto auto;
      background-color: #2196F3;
      padding: 10px;
    }

输出：

我的预期如下：

【问题讨论】：

【解决方案1】：

您需要将grid-auto-flow 设置为column，然后将grid-template-columns 更改为grid-template-rows（因为您现在按列填充网格）。

换句话说，在你的 CSS 中试试这个：

.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  background-color: #2196F3;
  padding: 10px;
}

https://jsfiddle.net/h8qm5sku/3/ 有一个 JSFiddle，以防万一

【讨论】：