如何让Ion Grid列适配内容且同列单元格宽度一致？

你遇到的问题根源在于Ion Grid默认的flex布局逻辑：size="auto"会让每一行的列各自独立计算宽度，导致同列单元格宽度不一致；去掉该属性后，列又会均分网格宽度，无法适配内容。下面给你两个实用的解决办法：

方法一：改用原生Table+Ionic样式 #

原生HTML Table天生就支持同列宽度统一为该列最长内容的宽度，同时可以套用Ionic的样式保持界面风格一致：

<ion-card class="ion-margin">
  <table class="ion-table">
    <thead>
      <tr class="ion-table-header">
        <th>No.</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let a of arr; index as i" class="ion-table-row">
        <td>{{ i + 1 }}</td>
        <td>{{ a.name }}</td>
        <td>{{ a.age }}</td>
      </tr>
    </tbody>
  </table>
</ion-card>

方法二：修改Ion-Grid的CSS布局为Table模式 #

如果不想替换成原生Table，可以给现有Grid添加自定义CSS，强制它使用table布局逻辑：

1. 给Grid加一个自定义类名：

<ion-grid class="ion-margin content-fit-grid">
  <ion-row>
    <ion-col>No.</ion-col>
    <ion-col>Name</ion-col>
    <ion-col>Age</ion-col>
  </ion-row>
  <ion-row *ngFor="let a of arr; index as i">
    <ion-col>{{ i + 1 }}</ion-col>
    <ion-col>{{ a.name }}</ion-col>
    <ion-col>{{ a.age }}</ion-col>
  </ion-row>
</ion-grid>

2. 在对应的CSS/SCSS文件中添加样式：

.content-fit-grid {
  display: table;
  width: auto; /* 让网格宽度随内容自适应 */
}

.content-fit-grid ion-row {
  display: table-row;
}

.content-fit-grid ion-col {
  display: table-cell;
  white-space: nowrap; /* 可选：防止内容换行，需要换行可删除这行 */
  padding: 0.5rem; /* 匹配Ionic默认内边距 */
}

两种方法都能实现「列宽适配内容+同列宽度统一」的效果，你可以根据自己的项目场景选择。

内容的提问来源于stack exchange，提问作者Chong you yuan