Trabajar con los Grids en Ionic es muy sencillo, se utilizan dos clases básicas que son:

• row: para las filas
• col: para las columnas

Podemos trabajar con tantas columnas o filas como queramos, ya que se ajustarán al espacio disponible.

Si ya estás acostumbrad@ a trabajar con bootstrap, no debes de tener problemas para entender cómo funcionan los grids en Ionic

Nota: para mostrar mejor los resultados de esta entrada y poder ver las filas y columnas  vamos a utilizar un estilo que marcará con 1px los bordes de la celdas.

Rejillas simples

En este primer ejemplo vamos a ver cómo utilizar las clases row y col de forma sencilla. De este modo vamos a crear dos filas. La primera con 5 columnas y la segunda sólo 3.

En el ejemplo podemos observar claramente cómo el ancho de la columnas es diferente y como se adaptan al ancho de la pantalla.

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

Tamaños de la columnas

En muchas ocasiones no querremos que los tamaños de las columnas se asignen automáticamente, y queremos que tengan diferentes anchos. Para ello podemos introducir la clase col-[tamaño], donde tamaño es el porcentaje de ancho de la fila que queremos ocupar.

Este cambio de tamaño sólo se aplica a la columna con tamaño específico aplicado, las demás se redistribuyen en el espacio que aun quede disponible.

En el siguiente ejemplo vemos cómo funciona esta nueva clase y cómo se organizan el resto de columnas

<div class = "row">
    <div class = "col col-50">col 1</div>
    <div class = "col">col 2</div>
    <div class = "col">col 3</div>
    <div class = "col">col 4</div>
    <div class = "col">col 5</div>
</div>
<div class = "row">
    <div class = "col col-50">col 1</div>
    <div class = "col">col 2</div>
    <div class = "col">col 3</div>
</div>

Posicionamiento horizontal

Las columnas pueden ser compensadas por la izquierda y por la derecha, funcionando igual que con el tamaño de las columnas pero utilizando la clase col-offset-[tamaño].

De este modo en el espacio determinado habrá espacios en blanco.

<div class = "row">
    <div class = "col">col 1</div>
    <div class = "col col-offset-25">col 2</div>
    <div class = "col">col 3</div>
    <div class = "col">col 4</div>
    <div class = "col">col 5</div>
</div>
<div class = "row">
    <div class = "col">col 1</div>
<div class = "col col-offset-25">col 2</div>
    <div class = "col">col 3</div>
</div>

Podemos alinear verticalmente las columnas dentro de una fila utilizando las clases:

• row-top: para colocar arriba
• row-center: para colocar a la altura central
• row-bottom: para colocar abajo de la fila

Rejillas responsive

Los grids en Ionic pueden utilizar el diseño responsive. Pensemos que no todos los dispositivos tienen la misma pantalla y que estamos trabajando para tablets y móviles.

Por ello Ionic mantiene en el diseño de rejilla tres clases que sirven para trabajar en este sentido:

• responsive-sm: más pequeño que un teléfono apaisado
• responsive-md: más pequeño que una tablet vertical
• responsive-lg: más pequeño que una tablet apaisada

En el siguiente ejemplo podemos ver como funciona en un móvil apaisado y vertical

<div class = "row responsive-sm">
    <div class = "col col-25">col 1</div>
    <div class = "col">col 2</div>
    <div class = "col">col 3</div>
    <div class = "col">col 4</div>
    <div class = "col">col 5</div>
</div>
<div class = "row responsive-sm">
    <div class = "col">col 1</div>
    <div class = "col">col 2</div>
    <div class = "col">col 3</div>
</div>

Móvil en vertical

Móvil en horizontal

De esta forma ya sabemos cómo crear nuestros grids en Ionic por lo que podemos pensar a imaginar diseños de forma muy intuitiva.