网格

Ionic的网格系统是基于flexbox，它是Ionic支持的所有设备支持的CSS功能。 网格由三个单元组成 - 网格，行和列。

有关更详细的文档，请查看API文档。

网格系统由12列组成，每个 ion-col 可以通过设置col- <width>属性来确定大小。

<ion-grid>
  <ion-row>
    <ion-col col-12>This column will take 12 columns</ion-col>
  </ion-row>
  <ion-row>
    <ion-col col-6>This column will take 6 columns</ion-col>
  </ion-row>
</ion-grid>

可以通过设置 ion-<breakpoint>-<width>来确定不同断点的 ion-col 密度。

<ion-grid>
  <ion-row>
    <ion-col col-12 col-sm-9 col-md-6 col-lg-4 col-xl-3>
      This column will be 12 columns wide by default,
      9 columns at the small breakpoint,
      6 at the medium breakpoint, 4 at large, and 3 at xl.
    </ion-col>
  </ion-row>
</ion-grid>

效果：