Ionic 网格系统（Grid）完整中文讲解
（适用于 Ionic 7 / 8，完全响应式，超好用！）
Ionic 的网格基于 CSS Flexbox + 12 列系统，比 Bootstrap 更轻量、更美观，而且完美适配手机、平板、桌面。
1. 基本结构（必须三层嵌套）
<ion-grid> <!-- 网格容器 -->
<ion-row> <!-- 行 -->
<ion-col> <!-- 列（自动均分） -->
1
</ion-col>
<ion-col>
2
</ion-col>
<ion-col>
3
</ion-col>
</ion-row>
</ion-grid>效果：一行三个等宽方块（每列自动占 33.33%）
2. 常用写法速查表（强烈建议收藏）
| 需求 | 写法 | 效果说明 |
|---|---|---|
| 平均 2 列 | <ion-col>（不写宽度） | 每列 50% |
| 平均 3 列 | <ion-col>（不写宽度） | 每列 33.33% |
| 平均 4 列 | <ion-col>（不写宽度） | 每列 25% |
| 固定宽度 | <ion-col size="4"> | 占 4/12 = 33.33% |
| 左 3 右 9（经典布局） | <ion-col size="3">左侧</ion-col><ion-col size="9">右侧</ion-col> | 左侧窄，右侧宽 |
| 左 4 中 4 右 4 | 三个 <ion-col size="4"> | 三等分 |
| 自动宽度（内容撑开） | <ion-col> + <ion-col size="auto"> | 最后一个列撑满剩余空间 |
| 偏移（留白） | <ion-col offset="2"> | 左边空 2 格 |
3. 响应式写法（重点！一套代码适配所有屏幕）
<ion-row>
<!-- 手机：占满12格（100%） -->
<!-- 平板：占6格（50%） -->
<!-- 桌面：占3格（25%） -->
<ion-col size="12" size-md="6" size-lg="3">
商品卡片
</ion-col>
<ion-col size="12" size-md="6" size-lg="3">
商品卡片
</ion-col>
<ion-col size="12" size-md="6" size-lg="3">
商品卡片
</ion-col>
<ion-col size="12" size-md="6" size-lg="3">
商品卡片
</ion-col>
</ion-row>断点说明（自动生效）：
| 属性 | 触发宽度 | 常见设备 |
|---|---|---|
| size | 所有设备（默认） | 手机、平板、电脑 |
| size-xs | ≥0px | 超小屏 |
| size-sm | ≥576px | 小屏手机竖屏 |
| size-md | ≥768px | 平板、大手机横屏 |
| size-lg | ≥992px | 小桌面 |
| size-xl | ≥1200px | 大桌面 |
4. 超实用完整示例
<ion-grid>
<!-- 标题栏 -->
<ion-row class="ion-align-items-center">
<ion-col size="6">
<h7>商品列表</h7>
</ion-col>
<ion-col size="6" class="ion-text-end">
<ion-button fill="clear">查看更多 ></ion-button>
</ion-col>
</ion-row>
<!-- 商品网格（响应式） -->
<ion-row>
<ion-col size="6" size-md="4" size-lg="3" size-xl="2" *ngFor="let item of products">
<ion-card>
<ion-img [src]="item.img"></ion-img>
<ion-card-content>
<ion-card-title>{{ item.name }}</ion-card-title>
<ion-text color="danger"><h5>¥{{ item.price }}</h5></ion-text>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>效果：
- 手机：2 列
- 平板：3 列
- 电脑：4 列
- 大屏：6 列
5. 对齐方式（超级实用）
<ion-row class="ion-align-items-center"> <!-- 垂直居中 -->
<ion-row class="ion-align-items-end"> <!-- 垂直底部对齐 -->
<ion-row class="ion-justify-content-center"> <!-- 水平居中 -->
<ion-row class="ion-justify-content-between"> <!-- 两端对齐 -->
<ion-row class="ion-justify-content-around"> <!-- 间隔均匀 -->6. 无间距网格（去掉默认 padding）
<ion-grid class="ion-no-padding">
<ion-row class="ion-no-padding">
<ion-col class="ion-no-padding">
<!-- 内容紧贴边 -->
</ion-col>
</ion-row>
</ion-grid>或者全局去掉：
ion-col {
--ion-grid-column-padding: 0px;
}7. 官方文档（中文）
总结一句话：
一套代码，所有设备自动适配，写起来比原生 flex 还简单！
需要我给你一个「完整响应式商城首页网格模板」（带卡片、搜索栏、分类、商品列表）吗？
支持一键复制直接跑，直接告诉我你要 Angular / React / Vue 哪个版本就行！
