The Ionic grid system is a powerful mobile-based flexbox system for building a custom layout. A flexbox is a CSS feature which is supported by all devices that Ionic supports. The Ionic grid is mainly composed of three units which are a grid, rows, and columns. It allows you to choose as many rows and columns you want. They can automatically adjust the size to accommodate the available space, although it can be changed according to your needs. The Ionic grid is made up of 12 column layout with different breakpoints based on the screen size. We can also customize the number of columns by using CSS.
The grid columns are a cellular component that goes inside of a row. All the content of a grid goes inside of a column.
The grid rows are horizontal components that contain a varying number of columns. It ensures the columns are positioned properly.
Here, we are creating a simple grid which shows you the use of rows and columns.
When we execute the app, it will give the following output.
If you do not want to leave the column sizes adjusted automatically, you can choose the size attribute to set the column size according to your need. The following example helps us to understand the use of size attribute accurately.
Note: This example will have borders applied to the column to display it in a way that is easy to understand.
Here, the first row uses the customized size, whereas the second row uses the default column size.
You can reorder the grid columns by using the two attributes, which are as follows.
This property is used to move the column to the right side of the specified column number. It increases the left margin of the column by the number of the specified column.
Push and pop
The push and pull properties adjust the left and right of the column by the specified number of columns.
The following example clearly understands the use of offset and push and pull properties.
When you execute the above Ionic app, you will get the following output. Here, the first column uses the offset property, and the second column uses the push and pull property.
Ionic grid allows you to use two types of column alignments, which are as follows.
The grid system allows multiple ways to align content vertically. It aligned columns inside of a row by adding different classes to the row. These different classes are:
In the below output, the first row aligned columns to start, the second row aligned to center and third-row aligned to end.
The grid system allows multiple ways to align content horizontally. It aligned columns inside of a row by adding different classes to the row. These different classes are:
When you run the Ionic app, it gives the following output.
By default, the grid takes 100 % width of the screen. If you need to set the maximum width based on the screen size, add the fixed attribute in the <ion-grid> element. The below table shows the different grid sizes.