Angular中CSS Grid实现指定行列布局及指定位置换行的问题

核心思路 #

通过CSS Grid定义等宽列轨道，结合Angular模板的遍历变量判断换行触发节点，实现：

• 所有列宽度完全相等
• 第一行、第三行显示2列，第二行显示3列的布局

步骤1：编写CSS Grid样式 #

.order-grid {
  display: grid;
  /* 定义3个等宽列，满足第二行3列的需求 */
  grid-template-columns: repeat(3, 1fr);
  /* 可选：设置网格项之间的间距 */
  gap: 1rem;
}

/* 强制元素跳到下一行的第一列 */
.break-row {
  grid-column: 1;
}

步骤2：调整Angular模板 #

利用Angular *ngFor的previous模板变量，判断上一个遍历项是否为Age或Product，为当前项添加换行类：

<!-- 假设order是你的订单数据对象，用keyvalue管道遍历键值对 -->
<div class="order-grid">
  <div 
    *ngFor="let item of order | keyvalue; let prev = previous"
    [class.break-row]="prev?.key === 'Age' || prev?.key === 'Product'"
  >
    <strong>{{item.key}}:</strong> {{item.value}}
  </div>
</div>

效果说明 #

• 第一行：从首个数据项开始，到Age项结束，共2个网格项，占前2个等宽列
• 第二行：Age之后的项自动跳至下一行第一列，显示3个网格项（占满全部3个等宽列），直到Product项结束
• 第三行：Product之后的项再次跳至下一行第一列，显示剩余的2个网格项

内容的提问来源于stack exchange，提问作者Angel Reji