动态css网格布局，保持一些元素在同一行答案

【问题标题】：dynamic css grid layout, keeping some elements on the same line动态css网格布局，保持一些元素在同一行
【发布时间】：2020-10-23 13:06:58
【问题描述】：

我最近开始使用 css 网格 (https://css-tricks.com/snippets/css/complete-guide-grid/)，但我觉得我没有充分利用它们。我的问题涉及我显示的数据是动态的情况。例如我想显示这个：

简而言之：

每行数据可以包含一列或两列
行由分隔行分隔
数据是动态的，css网格布局不能预设

感觉就像 css 网格有办法做到这一点（不动态生成 css），使用重复等......但我真的不明白怎么做。这是在 React 下完成的，一些动态行是使用映射生成的，代码看起来像这样：

return (
  <div>
    <div> 1A </div>
    <div> 1B </div>
    <MyDivider />

    <div> 2 </div>
    <MyDivider />

    {myData.map((row) => (
      <div key={row.key}>
        <div>{row.A}</div>
        <div>{row.B}</div>
        <MyDivider />
      </div>
    ))}

    // more rows, with single (merged) or dual columns...
  </div>
);

是否可以在不动态生成网格 css 的情况下做到这一点？即，为单/双列线和分隔线定义网格设置？此外，由于 map 功能，在 React 下，我的动态内容最终被包裹在一个 div 中；我是否需要将其分解为多个地图，以便我没有这个包装 div？

谢谢！

2020 年 10 月 24 日编辑： 澄清一下，我不想直接显示这张图中的内容，这只是一个布局，每个 '1A'、'1B' 块对应于某个数据单元格，就像在制表符中一样。

【问题讨论】：

您是否能够修改组件以向元素添加类以显示它们应该跨越两列还是一列？
是的，这是我的意图，我只是不确定如何在网格语法中映射它。

标签： css reactjs css-grid

【解决方案1】：

假设您知道一行是单列还是双列。
您可以使用grid-column 来创建单元格跨度，如下例所示

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px; // for demonstration purposes
}

.grid-item {
  background-color: lightblue; // for demonstration purposes
}

.grid-item.single {
  grid-column: span 2;
}

.grid-separator {
  grid-column: span 2;
  background-color: lightgreen; // for demonstration purposes
}

<div class="grid">
  <div class="grid-item">A1</div>
  <div class="grid-item">B1</div>
  <div class="grid-separator">Separator</div>
  <div class="grid-item single">A2</div>
  <div class="grid-separator">Separator</div>
  <div class="grid-item">A3</div>
  <div class="grid-item">B3</div>
  <div class="grid-separator">Separator</div>
  <div class="grid-item">A4</div>
  <div class="grid-item">B4</div>
  <div class="grid-separator">Separator</div>
  <div class="grid-item single">A5</div>
</div>

注意在某些情况下需要添加single类

【讨论】：

太好了，我错过了跨度控件。完美，谢谢！

【解决方案2】：

请向我们展示你的 css 或者你可以这样做......

.grid {
  display: grid;
grid-template-columns: 1fr 1fr;
}
.grid div  {
text-align: center;
background: #ddd;
margin: 2px;
padding: 10px;
}
.mydevider {
grid-column: 1 / span 2;
}

<div class="grid" >
  <div> 1A </div>
  <div> 1B </div>
  <div class="mydevider">
    <div> 1A </div>
  </div>
  <div> 1B </div>
  <div> 1B </div>
  <div class="mydevider">
    <div> 1A </div>
  </div>
  <div> 1B </div>
  <div> 2 </div>
</div>

【讨论】：

感谢您抽出宝贵时间回答。但是，我不是要在列中显示元素，而是针对图中所示的内容（其中元素可以分组在同一行上，也可以单独分组）。另外关于分隔线，它是一个自定义的 React 组件，我不想使用网格的边框。