Ionic Grid

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.

<div class="row">
  <div class="col">col 1</div>
  <div class="col">col 2</div>
  <div class="col">col 3</div>
</div>

If you run the above example it will produce output something like this –

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.

Example

<div class="row">
  <div class="col col-50">col 1(col-50)</div>
  <div class="col">col 2</div>
  <div class="col">col 3</div>
</div>

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 –