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

【问题标题】：CSS grid layout with span and *ngFor number of columns具有跨度和 *ngFor 列数的 CSS 网格布局
【发布时间】：2022-01-31 12:14:56
【问题描述】：

我目前正在尝试为 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 只会使所有列垂直堆叠。如果没有那么多列，将其设置为可能的最大宽度会留下空格。我尝试使用子网格 within 单元格 E 来包含列，但结果是相同的。有没有办法让 CSS 网格模板允许基于 *ngFor 的不同数量的列？

谢谢！

【问题讨论】：

标签： html css angular css-grid ngfor

【解决方案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 用于中间部分以允许它拉伸以适应内容的宽度应该复制您正在寻找的行为。

【讨论】：