ionic-framework Ionic CSS components Basic grid system syntax

Example

Basic grid

In Ionic you can declare rows by setting the row class to a element. Rows will be elements which are horizontally aligned and anything inside this element everything will belong to the row. Inside the row you can declare different width columns. You have a choice of the following declarations.

Class	Width
.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%

The maximum value columns may have inside a row is 100. Here's a few examples of the basic grid.

<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>

Offset grids

You can also set col-offset-<value> to the columns. In the example below the one-third of a width column has one-third of the width offset, which means it will be one-third width wide and be centered in the page because of it's offset.

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

Align columns

Aligning columns vertically is possibly by setting the col-<align_value> to a column separately like this.

<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>

The above will align each column on it's own. If you want to align all the columns inside the row you can set the align value to the row itself. In the example below all the columns inside this row will align themselves vertically in the center of the row.

<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>

Responsive grid

You might also want to have the columns responsive as of they will stack on top of each other at some viewport width. You have three choices.

Class	Breakpoint (approximately)
.responsive-sm	Smaller than landscape phone
.responsive-md	Smaller than portrait tablet
.responsive-lg	Smaller than landscape tablet

In this example these columns will stack under the width of approximately a landscape phone.

<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>

You can also make your own media queries of course if these breakpoints are not suitable for you and/or you need more specific breakpoints.