跨多个列的角度 CSS 网格对象

Question

我正在尝试做我认为是一个简单的任务，但似乎无法弄清楚，所以也许这是不可能的。

我有一个正在迭代的对象，该对象有两个属性

export class OptionLine {
  lineCode: number;
  lineDescription: String;
}

我希望行代码是第 1 列，行描述是第 2 列

我最近的尝试如下所示：

<div class="config-options-box">
  <div *ngFor="let optionLine of optionLines">
     <div class="config-options-line-name">{{optionLine.lineCode}}</div>
     <div class="config-options-line-choices">{{optionLine.lineDescription}}</div>
  </div>
</div>

.CSS：

.config-options-box { display: grid; grid-template-columns: 300px 600px; grid-gap: 10px; } .config-options-line-name { grid-column-start: 1; grid-row-end: span 1 } .config-options-line-choices { grid-column-start: 2; grid-row-end: span 1 }

但这最终导致项目 1 在第一个单元格中有 2 行

，项目 2 在第二个单元格中有 2 行(第 1 行第 2 列(，依此类推。

这可能吗？

Answer 1

发现我可以在主网格的每一列内显示一个子网格。因此，主网格是 1 行 x 2 列，然后每列内部都有一个网格，即 n 行 x 1 列。可能不是最有效的解决方案，但我应该有少于 20 个项目，所以我想它会很好。

<div class="config-options-box">
  <div class="config-options-names">
    <div *ngFor="let optionLine of optionLines">
      <div class="config-options-line-name">{{optionLine.lineCode}}</div>
    </div>
  </div>
  <div class="config-options-descriptions">
    <div *ngFor="let optionLine of optionLines">
      <div class="config-options-line-name">{{optionLine.lineDescription}}</div>
    </div>
  </div>
</div>

.config-options-box {
  display: grid;
  grid-template-columns: 300px 600px;
  grid-gap: 10px;
}
.config-options-subgrid {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 10px;
}