我正在使用Grid来展示一些数据。我希望有一个布局,第一行是标题,第二行是子标题,第三行是主要内容。使用
我一直在尝试调整前两行的样式,但卡住了。在我的示例中,我定义了CSS
这将产生这样的布局:第一行是正确的,第二行具有正确的布局,但所有子标题的迭代都放置在同一个单元格中,例如:
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>
这将产生这样的布局:第一行是正确的,第二行具有正确的布局,但所有子标题的迭代都放置在同一个单元格中,例如:
* * *
*** ***
我的要求是:
* * *
* *
* *
* *
....
希望能得到如何完成此任务的任何提示;)