ionic Grid(Grid)


ionic's Grid is different from most other frameworks. It uses the Flexible Box Model. And on the mobile side, basically all mobile phones support it. The row style specifies rows, and the col style specifies columns.

Equal size grid

If the element with row style contains col style, col will be set to the same size.

In the following example, the row style contains 5 col styles, and the width of each col is 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>


Specify column width

You can set the size of each column in a row to be different. By default, columns are divided into equal sizes. But you can also set column widths as a percentage (12 grids per row). 

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


Note: In the example, each col style will automatically add a top border and gray background.

Listed below are style names that specify some percentages of column width:

##.col-7575%.col-8080%.col-9090%
.col-1010%
.col-2020%
.col-2525%
.col-3333.3333%
.col-5050%
.col-6766.6666%
Grid with offset

The column can set the left offset, the example is as follows:

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


The following are some percentages Offset style name:

.col-offset-1010%.col- offset-2020%.col-offset-2525%. col-offset-3333.3333%.col-offset-5050%.col-offset-6766.6666%.col-offset-7575%.col-offset-8080%.col-offset-9090%
Vertical Alignment Grid

The flex box model makes it easy to set vertical alignment of columns. Vertical alignment includes top, middle, and bottom, and can be applied to each row, column, or to a specified column.

In the example, the last column is set with the highest content for better demonstration of vertical alignment of the grid. 

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


Responsive Grid

When the handheld device screen is switched, such as horizontal screen, vertical screen, etc. You need to set the grid of each row to adapt the size according to different widths.

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

Responsive classDescription.responsive-sm Smaller than mobile phone horizontal screen.responsive-md Smaller than tablet vertical screen.responsive-lgSmaller than tablet horizontal screen
<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>


←
→