ionic 的网格（Grid）和多数框架不太一样，底层采用的是弹性盒子模型（Flexible Box Model）。好处也很直接：放在移动端用，绝大多数手机都能支持。具体来说，row 样式用来定义行，col 样式则负责定义列。
同等大小网格
在带有 row 的样式的元素里如果包含了 col 的样式，col 就会设置为同等大小。
以下实例中 row 的样式包含了 5 个 col 样式，每个 col 的宽度为 20%。
.col
.col
.col
.col
.col
指定列宽
一行里的每一列，其实不必做成一样宽。默认状态下，系统会把这些列平均分配；当然，也可以按百分比来自定义每列的宽度，前提是整行仍然基于 12 个网格来划分。
.col.col-50
.col
.col
.col.col-75
.col
.col
.col.col-75
.col
.col
注意：实例中，每个 col 样式会自动添加上边框和灰色背景。
下面列出了指定列宽的一些百分比的样式名:
| .col-10 | 10% |
| .col-20 | 20% |
| .col-25 | 25% |
| .col-33 | 33.3333% |
| .col-50 | 50% |
| .col-67 | 66.6666% |
| .col-75 | 75% |
| .col-80 | 80% |
| .col-90 | 90% |
有偏移量的网格
列可以设置左侧偏移量，实例如下：
.col
.col
.col
.col
.col
下面是一些百分比的偏移量样式名：
| .col-offset-10 | 10% |
| .col-offset-20 | 20% |
| .col-offset-25 | 25% |
| .col-offset-33 | 33.3333% |
| .col-offset-50 | 50% |
| .col-offset-67 | 66.6666% |
| .col-offset-75 | 75% |
| .col-offset-80 | 80% |
| .col-offset-90 | 90% |
纵向对齐网格
弹性盒子模型可以很容易设置列纵向对齐。纵向对齐包含顶部，中间部分，底部，可以应用到每一行的列，或者指定的某列。
实例中，最后一列设置了最高的内容用于更好的演示纵向对齐网格。
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
响应式网格
手持设备屏幕在切换时，例如横屏，竖屏等。就需要设置每行的网格可以实现根据不同宽度自适应大小。
不同设备响应式类的样式如下:
| 响应式类 | 描述 |
| .responsive-sm | 小于手机横屏 |
| .responsive-md | 小于平板竖屏 |
| .responsive-lg | 小于平板横屏 |
.col
.col
.col
.col
