Question

我正在使用Grid呈现一些数据。我想要一种布局，其中第一行是标题，第二行是子标题，第三行是主要内容。使用grid-template-areas的{{1}}属性很容易做到。我的问题是我希望第一行只生成一次，而第二和第三行应该是动态的。

我一直在努力使前两行正确，因此在我的示例中将只引用这两行。

我的CSS grid-container定义如下：

grid container

我的html如下：

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

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

<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（相同的网格区域将重叠-看到另一个example here），并使用grid-template-columns: repeat(3, 1fr)使用三列布局，然后设置{ {1}}代表grid-column: 1，sub-header-item-1代表grid-column: 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;
}

使用CSS网格的动态行

1 个答案: