Ionic Grid

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.

Grid Column

The grid columns are a cellular component that goes inside of a row. All the content of a grid goes inside of a column.

Grid Rows

The grid rows are horizontal components that contain a varying number of columns. It ensures the columns are positioned properly.

Example

Here, we are creating a simple grid which shows you the use of rows and columns.

Output

When we execute the app, it will give the following output.

Column Size

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.

Example

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.

Output

Reordering Columns

You can reorder the grid columns by using the two attributes, which are as follows.

1. Offset
2. Push and Pull

Offset

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.

Example

The following example clearly understands the use of offset and push and pull properties.

Output

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.

Column Alignment

Ionic grid allows you to use two types of column alignments, which are as follows.

1. Vertical Alignment
2. Horizontal Alignment

Vertical Alignment

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:

• ion-align-items-start
• ion-align-items-center
• ion-align-items-end

Example

Output

In the below output, the first row aligned columns to start, the second row aligned to center and third-row aligned to end.

Horizontal Alignment

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:

• ion-justify-content-start
• ion-justify-content-center
• ion-justify-content-end
• ion-justify-content-around
• ion-justify-content-between

Example

Output

When you run the Ionic app, it gives the following output.

Grid Size

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.