Ionic Grid

Ionic's Grid is different from most frameworks as it uses the Flexible Box Model. It is also supported on most mobile devices. The row style specifies rows, and the col style specifies columns.

Equal Sized Grid

If an element with the row style contains col styles, the col elements will be set to equal sizes.

In the following example, the row style contains 5 col styles, each with a width of 20%.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Try it »

Specifying Column Widths

You can set different sizes for columns in a row. By default, columns are divided into equal sizes, but you can also set column widths by percentage (a row is 12 grids).

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Try it »

Note: In the examples, each col style will automatically have a border and a grey background.

Here 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 left offsets, as shown in the following example:

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-33">.col</div>
  <div class="col col-33 col-offset-33">.col</div>
</div>

<div class="row">
  <div class="col col-33 col-offset-67">.col</div>
</div>

Try it »

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 Grid

The Flexible Box Model makes it easy to set vertical alignment for columns. Vertical alignment includes top, middle, and bottom, and can be applied to each row of columns or specified columns.

In the example, the last column has the highest content for better demonstration of vertical alignment.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>

<div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-top">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

<div class="row row-bottom">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

Try it »

Responsive Grid

When the screen of handheld devices switches, such as landscape, portrait, etc., it is necessary to set each row of grids to automatically adapt to different widths.

The styles for responsive classes on different devices are as follows:

| Responsive Class | Description | | .responsive-sm | Less than phone landscape | | .responsive-md | Less than tablet portrait | | .responsive-lg | Less than tablet landscape |

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Try it »