CSS 具有跨度和 *ngFor 列数的网格布局

Question

我目前正在尝试为 Angular 应用制作一个具有动态列数的 CSS 网格。网格的一部分应分为 1-to-n 列，具体取决于特定数组中的项目数。每个部分也应该有一个 header，header 用于跨越所有 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为header，D、E、F对应其上面的类。

对 grid-template 使用 repeat 需要一定数量的列，将其设置为 auto 只会使所有列垂直堆叠。如果没有那么多列，将其设置为可能的最大宽度会留下空白。我曾尝试使用子网格 within 单元格 E 来包含列，但结果是一样的。有没有办法让 CSS grid-template 允许基于 *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 以允许其拉伸以适应内容的宽度应该复制您正在寻找的行为。

CSS 具有跨度和 *ngFor 列数的网格布局

CSS grid layout with span and *ngFor number of columns

html

css

angular

css-grid

ngfor