CSS Grid：具有动态行的复杂嵌套网格答案

【问题标题】：CSS Grid: Complex nested grid with dynamic rowsCSS Grid：具有动态行的复杂嵌套网格
【发布时间】：2020-09-17 08:36:18
【问题描述】：

我正在尝试使用 CSS Grid 实现这样的布局：

Headers 和 Sub 1、Sub 2 等是固定的，因此唯一增长的部分是动态行，每当用户单击“添加项目”时都会添加一个新行。一切都需要正确对齐。我正在尝试使用 CSS Grid 来实现这一点，或多或少使用以下标记：

<div class="containter">
  <div class="header"></div>
  <div class="subheaders"></div>
  <div class="rows">
    <div class="row">
      <div class="column"></div>
      <div class="column"></div>
      <div class="column multicolumn">
        <input />
        <input />
        <input />
      </div>
      <div class="column multicolumn">
        <input />
        <input />
        <input />
      </div>
      <div class="column multicolumn">
        <input />
        <input />
        <input />
      </div>
      <div class="column"></div>
      <div class="column"></div>
    </div>    
  </div>
</div>

这甚至可以使用 CSS 网格吗？我知道这可以使用表格来实现，但由于它不完全是表格数据，我们正在尝试使用网格。

编辑：在屏幕截图中添加了更多信息

【问题讨论】：

图片代表一个表格，那么为什么不使用 html <table> 呢？
您还可以使用由flex-box 或flex-box 和grid 组合创建的响应式网格。
CSS-Grid 需要subgrid 的完全支持才能做到这一点（使用您当前的结构），正如已经说过的，这实际上是一个table，所以您应该使用一个。
@Paulie_D 我在屏幕截图中添加了更多信息。是的，我可以使用表格，但我认为标记会变得有点复杂。您将如何管理没有标题的列和嵌套列的定位？此外，在未来这可能会成为响应式。

标签： css layout css-grid

【解决方案1】：

我使用 12 列响应式网格系统和 flex 属性重新构建您的布局。

为了支持响应式布局，您可以简单地为 col 元素添加媒体查询，例如col-4-xl，col-6-xl，所以它的工作方式类似于 Bootstrap 或 Materialize 的网格系统。

您还可以为 row 类添加一个父元素，其中包含一些填充以在 y 方向重新创建 grid-gap 属性，例如

.row__parent{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
}

但具体的变化取决于您的要求。

代码笔： https://codepen.io/michaelkonstreu/pen/KKzxmyL

【讨论】：