Complex grids

We will be starting with one of the common problems many developers face while building applications in the Ionic grid system. The Ionic grid system is based on flexbox (http://www.w3.org/TR/css3-flexbox/), which is a CSS3 feature that is supported by all devices. Grids contain three components: grid, rows, and columns. Here are some important points to note about the grids system:

  • ion-grid and ion-col have padding by default of 5px, but the ion-row has no padding and no margin.
  • The no-padding attribute can be added for removing that padding.
  • Twelve column layout is used, similar to what we have in bootstrap grid system.
  • column attribute is used in ion-col for setting width, such as <ion-col col-3> and the default, is col-12 ...

Get Hybrid Mobile Development with Ionic now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.