时间戳

首页 > 解决方案 > CSS Grid：具有动态行的复杂嵌套网格

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

问题描述

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

在此处输入图像描述

标题和子 1、子 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 网格吗？我知道这可以使用表格来实现，但由于它不完全是表格数据，我们正在尝试使用网格。

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

标签： csslayoutcss-grid

解决方案

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

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

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

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

但是这个详细的变化取决于你的要求。

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

推荐阅读