css - 跨多列的角度 CSS 网格对象
问题描述
我正在尝试做我认为是一项简单的任务,但似乎无法弄清楚,所以也许这是不可能的。
我有一个正在迭代的对象,该对象有两个属性
export class OptionLine {
lineCode: number;
lineDescription: String;
}
我希望 LineCode 为 1 列, LineDescription 为 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 列)等。
这甚至可能吗?
解决方案
发现我可以在主网格的每一列内显示一个子网格。所以主网格是 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;
}
推荐阅读
- android - 根据条件在recyclerview上显示项目
- amazon-cloudformation - 类型为 StringList 的 cloudformation SSM 动态引用能否解析为列表?
- java - 匹配不以日期开头的行
- azure - 如何根据值复制 Azure 数据工厂中的数据?
- reactjs - 使用 preact-compt 时出错 Uncaught (in promise) ReferenceError: h is not defined
- postman - 如果邮递员401,授权并重试
- google-analytics - 备份 Google Data Studio、Tag Manager 和 Analytics 配置的方法?
- xml - 由于 XML 中的错误,无法在 Web 项目中获取结果
- io - xv6 如何使用中断将 I/O 请求调度到磁盘
- c# - 如何判断给定节点是否位于根节点