本文详解如何结合 ionic 的 `
Ionic 提供了一套基于 CSS Grid 的响应式栅格系统（ion-grid / ion-row / ion-col），其核心在于 ion-col 的 size* 属性（如 sizeXs、sizeSm、sizeMd、sizeLg、sizeXl），它们分别控制不同断点下的列宽占比（以 12 分栏为基准）。要实现类似电商首页的卡片式响应式网格（如图中 3 列 → 2 列 → 单列自适应），*关键在于将 `ngFor直接绑定在
以下是一个生产就绪的示例：
<ion-grid>
<ion-row>
<ion-col
sizeXs="12"
sizeSm="6"
sizeMd="4"
sizeLg="3"
*ngFor="let prod of displayedList">
<ion-item
class="item-entry"
detail
[routerLink]="['/tabs/tab1/prod-detail', prod.id]">
<ion-thumbnail slot="start">
<ion-img
[src]="prod.images[0]?.src"
[alt]="prod.name">
</ion-img>
</ion-thumbnail>
<ion-label>
<h3 class="item-name">{{ prod.name }}</h3>
<ion-text>
<p class="price">{{ prod.price | currency:'GBP' }}</p>
</ion-text>
</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>✅ 响应式逻辑说明：
- sizeXs="12"：超小屏（默认 ≤ 576px）→ 每行 1 列（12 ÷ 12 = 1）
- sizeSm="6"：小屏（≥ 576px）→ 每行 2 列（12 ÷ 6 = 2）
- sizeMd="4"：中屏（≥ 768px）→ 每行 3 列（12 ÷ 4 = 3）
- sizeLg="3"：大屏（≥ 992px）→ 每行 4 列（12 ÷ 3 = 4）
⚠️ 重要注意事项：
- 不要将 *ngFor 放在
外层容器（如你原始代码中的 ），否则所有商品会挤在同一列内，失去网格语义； - ion-col 必须直接作为 ion-row 的子元素，且 *ngFor 应作用于 ion-col 本身；
- 使用可选链操作符 ?.（如 prod.images[0]?.src）避免因图片数组为空导致模板报错；
- routerLink 推荐使用数组语法 [routerLink]="['/path', id]"，比字符串插值更安全、更易测试；
- 若需自定义间距，可通过 Ionic 的 ion-padding、ion-margin 工具类或 CSS 变量（如 --ion-grid-column-gap）微调列间隙。
总结：Ionic 的响应式网格本质是“数据驱动列”，而非“列内渲染数据”。掌握 size* 属性与 *ngFor 的正确结合位置，即可轻松构建跨设备一致、性能良好、语义清晰的商品网格布局。
