带有span和*ngFor列数的CSS网格布局

Question

我目前正在尝试为Angular应用程序制作一个具有动态列数的CSS网格。网格的一部分应该划分为1到n列，这取决于特定数组中有多少项。每个部分也应该有一个标题，动态部分的标题跨越所有n列。因此，对于这样的html页面：

<div class="my-grid"
<div class="foo">
<div class="header">Foo</div>
<div class="cell-D" otherAttributes="otherValues"></div>
</div>
<div class="dynamic">
<div class="header">Foo</div>
<div class="cell-E" *ngFor="let object of objects" otherAttributes="otherValues">
</div>
<div class="bar">
<div class="header">Foo</div>
<div class="cell-F" otherAttributes="otherValues"></div>
</div>
</div>

结果应该是这样的：

One object in objects:
+---+---+---+
| A | B | C |
+---+---+---+
| D | E | F |
+---+---+---+
Two objects in objects:
+---+-------+---+
| A |   B   | C |
+---+---+---+---+
| D | E | E | F |
+---+---+---+---+
Three objects in objects:
+---+-----------+---+
| A |     B     | C |
+---+---+---+---+---+
| D | E | E | E | F |
+---+---+---+---+---+
etc.

其中A、B和C是头，D、E和F对应于它们上面的类。

将repeat用于网格模板需要一定数量的列，而将其设置为auto只会使所有列垂直堆叠。如果没有那么多列，将其设置为可能的最大宽度会留下空白。我曾尝试在单元格E中使用子网格来包含列，但结果是一样的。有没有一种方法可以让CSS网格模板允许基于*ngFor的不同列数？

谢谢！

Answer 1

你可以这样做：

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.my-grid {
display: grid;
grid-template-columns: 300px 1fr 300px;
grid-template-rows: 1fr 1fr;
width: 900px;
min-width: max-content;
text-align: center;
}
.my-grid>* {
height: 300px;
display: grid;
place-items: center;
border: 1px solid black;
}
.dynamic {
display: flex;
}
.dynamic>div {
border: 1px solid black;
width: 300px;
height: 100%;
display: grid;
place-items: center;
}

<div class="my-grid">
<div class="A">
A
</div>
<div class="B">
B
</div>
<div class="C">
C
</div>
<div class="D">
D
</div>
<div class="dynamic">
<div>E</div>
<div>E</div>
<div>E</div>
<div>E</div>
</div>
<div class="F">
F
</div>
</div>

我在这里所做的是自定义网格的columns。为第一个和最后一个单元格设置具有特定尺寸的grid-template-columns，然后为中间部分使用1fr，使其能够拉伸以适应内容的宽度，这应该会复制您想要的行为。