html - 使用 CSS 网格的动态行

Question

我正在使用网格来呈现一些数据。我想要一个布局，其中第一行是标题，第二行是子标题，第三行是主要内容。使用 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>

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

 *        *       *
***              ***

我追求的是:

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

非常感谢有关如何完成此操作的任何提示 ;)

Answer 1

您可以删除 grid-template-areas(相同的 grid areas 将重叠 - 请参阅另一个 example here )并使用 grid 使用 3 列布局-template-columns: repeat(3, 1fr) 然后为 sub-header-item-1 和 grid 设置 grid-column: 1 -列:3 用于 sub-header-item-2。

请看下面的演示:

.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>