ionic tutorial - Basic grid system syntax in ionic framework - ionic framework - ionic 2 - ionic creator - ionic development
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>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
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>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
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>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
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>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
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>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
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.