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

我尝试使用CSS网格实现如下布局：

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

<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网格是否可能做到这一点？我知道这可以通过使用表格来实现，但由于它不是完全的表格数据，我们正在尝试使用网格

---

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

我使用12列响应网格系统结合

flex

属性重建布局

为了支持响应性布局，您可以简单地为

col

元素添加媒体查询，例如

col-4-xl

，

col-6-xl

，以便其工作方式类似于引导或物化的网格系统

您还可以为

行

类添加父元素，该元素包含一些填充以在y方向上重新创建

网格间距

属性，例如

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

但具体的变化取决于您的需求

Codepen:

---

图像表示一个表格，为什么不使用html

呢？您也可以使用使用

flex-box

创建的响应网格，或者使用

flex-box

和

grid

的组合。CSS网格需要

子网格的全力支持才能做到这一点（使用您当前的结构），正如前面所说的，这实际上是一个
表
，所以你应该使用它。@Paulie\u D我已经在屏幕截图中添加了更多信息。是的，我可以使用表格，但我认为标记会变得有点复杂。如何定位没有标题的列和嵌套列？而且，在未来，这可能会变得更加敏感。