The Ionic grid system is indeed a mobile-based flexbox system that can be used to create a custom layout. The Ionic grid is made up of three primary components: a grid, rows, and columns. The Ionic grid consists of a 12-column layout with several breakpoints depending on screen size.
The following key points are to be remembered while dealing with an Ionic Grid :
* Grids are used to hold rows and columns together. It occupies the entire width of its container, however, the fixed attribute specifies the width per screen size.
* Only columns should be immediate children of rows, as rows are horizontal groups of columns. Columns are where we put our contents, and only columns should be immediate children of rows.
* Out of the default 12 columns per row, the size attributes specify the number of columns to use. As a result, size="4" can be appended to a column to fill up 1/3 of the grid.
* If no size value is specified for a column, it will be automatically divided into equal widths.
* Individual columns have padding properties, although the padding can be eliminated from the grid and columns by setting no-padding on the grid.
