使用CSS Grid实现动态行

Question

我正在使用Grid来展示一些数据。我希望有一个布局，第一行是标题，第二行是子标题，第三行是主要内容。使用grid-container的grid-template-areas属性很容易实现这一点。我的问题是，我希望第一行只生成一次，而第二行和第三行应该是动态的。

我一直在尝试调整前两行的样式，但卡住了。在我的示例中，我定义了CSS grid container如下：

.grid-container {
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
         "header1 header2 header3"
         "subheader1 . subheader2";
}

.header-item-1 {
     grid-area: header1;
}

.header-item-2 {
     grid-area: header2;
}

.header-item-3 {
     grid-area: header3;
}

.sub-header-item-1 {
     grid-area: subheader1;
}

.sub-header-item-2 {
     grid-area: subheader2;
}

我的HTML代码如下：

<ul class="grid-container">
    <li class="header-item-1">header1</li>
    <li class="header-item-2">header2</li>
    <li class="header-item-3">header3</li>

<!-- ko foreach: { data: subheaderItem, as: 'subheader' } -->

    <li class="sub-header-item-1" data-bind="text: subheader.name"></li>
    <li class="sub-header-item-2" data-bind="text: subheader.type></li>

<!-- /ko -->
</ul>

这将产生这样的布局：第一行是正确的，第二行具有正确的布局，但所有子标题的迭代都放置在同一个单元格中，例如：

 *        *       *
***              ***

我的要求是：

 *        *       *
 *                *
 *                *
 *                *
....

希望能得到如何完成此任务的任何提示；）

- Chi

Answer 1

你可以移除grid-template-areas（相同的网格区域会重叠 - 可以看看这个示例），并使用grid-template-columns: repeat(3, 1fr)创建一个三列布局，然后为sub-header-item-1设置grid-column: 1，为sub-header-item-2设置grid-column: 3。

以下是演示：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.sub-header-item-1 {
  grid-column: 1;
}

.sub-header-item-2 {
  grid-column: 3;
}

<ul class="grid-container">
  <li class="header-item-1">header1</li>
  <li class="header-item-2">header2</li>
  <li class="header-item-3">header3</li>
  <li class="sub-header-item-1">1</li>
  <li class="sub-header-item-2">3</li>
  <li class="sub-header-item-1">1</li>
  <li class="sub-header-item-2">3</li>
  <li class="sub-header-item-1">1</li>
  <li class="sub-header-item-2">3</li>
</ul>

- kukkuz