Cuadrícula (Grid) de Ionic

La cuadrícula (Grid) de Ionic es diferente a la de la mayoría de los otros frameworks, ya que utiliza el modelo de caja flexible (Flexible Box Model). Además, en el lado móvil, prácticamente todos los teléfonos lo admiten. El estilo row especifica la fila y el estilo col especifica la columna.

Cuadrícula de igual tamaño

En un elemento con el estilo row, si contiene estilos col, las col se establecen con el mismo tamaño.

En el siguiente ejemplo, el estilo row contiene 5 estilos col, y el ancho de cada col es del 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>

Especificar ancho de columna

Puedes configurar que cada columna de una fila tenga un tamaño diferente. De forma predeterminada, las columnas se dividen en el mismo tamaño, pero también puedes establecer el ancho de las columnas por porcentaje (una fila son 12 cuadrículas).

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

Nota: En el ejemplo, cada estilo col agrega automáticamente un borde y un fondo gris.

A continuación se enumeran algunos nombres de estilos de porcentaje para especificar el ancho de columna:

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

Cuadrícula con offset

Las columnas pueden tener un desplazamiento a la izquierda, como en el siguiente ejemplo:

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

A continuación se muestran algunos nombres de estilos de offset por porcentaje:

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

---

Alineación vertical de la cuadrícula

El modelo de caja flexible permite configurar fácilmente la alineación vertical de las columnas. La alineación vertical incluye superior, medio e inferior, y se puede aplicar a las columnas de cada fila o a una columna específica.

En el ejemplo, la última columna tiene el contenido más alto para demostrar mejor la alineación vertical de la cuadrícula.

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

---

Cuadrícula responsive

Cuando la pantalla de un dispositivo portátil cambia, por ejemplo, horizontal, vertical, etc., es necesario configurar la cuadrícula de cada fila para que se adapte automáticamente según el ancho.

Los estilos de clases responsive para diferentes dispositivos son los siguientes:

Clase responsive	Descripción
.responsive-sm	Menos que teléfono horizontal
.responsive-md	Menos que tableta vertical
.responsive-lg	Menos que tableta horizontal

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

Otras extensiones