Ionic's Grid system is different from most other frameworks. It uses the Flexible Box Model and is supported by virtually all mobile devices. The `row` style specifies a row, and the `col` style specifies a column.
### Equal-Size Grid
If elements with the `row` style contain elements with the `col` style, the columns will be set to equal sizes.
In the following example, the `row` style contains 5 `col` styles, each with a width of 20%.
### Specifying Column Width
You can set different sizes for columns within a row. By default, columns are divided equally. However, you can also set column widths by percentage (one row has 12 grid units).
Note: In the examples, each `col` style automatically adds a top border and a gray background.
Below are some percentage-based style names for specifying column widths:
.col-10 10%
.col-20 20%
.col-25 25%
.col-33 33.3333%
.col-50 50%
.col-67 66.6666%
.col-75 75%
.col-80 80%
.col-90 90%
### Grid with Offsets
Columns can have a left offset, as shown in the following examples:
Here are some percentage-based offset style names:
.col-offset-10 10%
.col-offset-20 20%
.col-offset-25 25%
.col-offset-33 33.3333%
.col-offset-50 50%
.col-offset-67 66.6666%
.col-offset-75 75%
.col-offset-80 80%
.col-offset-90 90%
* * *
## Vertical Alignment of Grid
The Flexible Box Model makes it easy to vertically align columns. Vertical alignment includes top, middle, and bottom, and can be applied to columns in each row or to specific columns.
In the examples, the last column is set with the tallest content to better demonstrate vertical grid alignment.
* * *
## Responsive Grid
When the screen of a handheld device switches, for example between landscape and portrait modes, it is necessary to set each row's grid to adapt to different widths.
The responsive classes for different devices are as follows:
Responsive Class Description
.responsive-sm Smaller than phone landscape
.responsive-md Smaller than tablet portrait
.responsive-lg Smaller than tablet landscape
YouTip