如何在Angular Ionic中用3列网格均分展示动态数据

下面提供两种可行的实现方案，都能保留你原有代码的核心逻辑（空数组判断、国际化翻译）：

方法一：使用Ionic内置网格组件 #

Ionic自带基于12列布局的网格系统，直接用ion-grid、ion-row、ion-col就能快速实现3列均分：

<div *ngIf="personNameArray.length">{{'Selected People:'|translate}}</div>
<div class="ion-margin-start" *ngIf="personNameArray.length">
  <ion-grid>
    <ion-row>
      <ion-col size="4" *ngFor="let name of personNameArray">
        {{name}}
      </ion-col>
    </ion-row>
  </ion-grid>
</div>

关键说明： #

• size="4"：Ionic网格默认是12列布局，每列占4份（4×3=12），刚好实现3列均分。
• 若需要响应式适配，可额外添加size-sm="6" size-xs="12"这类属性，让小屏幕自动调整列数（比如手机端显示2列/1列）。

方法二：使用CSS Grid原生布局 #

如果需要更灵活的自定义控制，用原生CSS Grid也能实现：

1. 先在组件样式文件（.scss/.css）中添加网格样式：

.three-column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 强制均分3列 */
  gap: 8px; /* 可选：设置列之间的间距 */
}

2. 修改模板代码：

<div *ngIf="personNameArray.length">{{'Selected People:'|translate}}</div>
<div class="ion-margin-start three-column-grid" *ngIf="personNameArray.length">
  <div *ngFor="let name of personNameArray">
    {{name}}
  </div>
</div>

关键说明： #

• grid-template-columns: repeat(3, 1fr)：1fr代表每列平分容器剩余空间，repeat(3, 1fr)直接生成3个等宽列。
• gap属性可根据视觉需求调整列间距，也可以单独用column-gap/row-gap分别控制列、行间距。

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