Ionic Grid – Ionic provides beautiful grid system. It uses css flexible box and layout module so ionic supports all devices which supports layout module standard. Grid in ionic is basically 12 column layout system. You can add columns as per your requirement. Here we are going to explain the grid system in ionic.
Ionic Grid Example
To create grid columns we first need to create row. Add class .row in div and add the child divs with class name .col. Add the .col class as much as you want to create columns. Below is simple example of grid with 3 columns.
Ionic Grid View / System with Demo & Example
If you run the above example it will produce output something like this –
More About Grid
Let us learn more about the grid system in ionic framework.
Explicit Column Sizes
You can explicitly define the column size for example sometimes we need
a specific column to be larger than the other columns in the same row. By default each column evenly takes the available area but for the specific size of the column ionic uses the percent system(12 column grid system).
By using this grid system you can make a column larger by just using the percentage and the others remaining columns will divide the remaining area. Let us create a simple example to understand the explicit column sizes.
Explicit Column Size Example
In the above example first column will be 50% of the screen size and the rest columns will adjust accordingly. If you run the above example it will produce output something like this –