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 ...