ionic2 Ionic2 CSS components Grid


Example

Ionic’s grid system is based on flexbox, a CSS feature supported by all devices that Ionic supports. The grid is composed of three units-grid, rows and columns. Columns will expand to fill their row, and will resize to fit additional columns.

ClassWidth
width-1010%
width-2020%
width-2525%
width-3333.3333%
width-5050%
width-6766.6666%
width-7575%
width-8080%
width-9090%

Example.

    <ion-grid>
      <ion-row>
        <ion-col width-10>This column will take 10% of space</ion-col>
      </ion-row>
    </ion-grid>