Cómo crear un diseño responsive en Ionic 4

Tutorial Principiante.

Hola que tal el día de hoy hablamos sobre crear diseños adapatables a cada pantalla donde se ejecuta la aplicación, con el uso de la etiqueta ION-GRID dentro del código de ionic, el sitio de la documentación oficial nos dice lo siguiente:

La cuadrícula es un potente sistema flexbox móvil primero para crear diseños personalizados.

Se compone de tres unidades: una cuadrícula, fila (s) y columna (s).
Las columnas se expandirán para llenar la fila y cambiarán de tamaño para adaptarse a columnas adicionales. Se basa en un diseño de 12 columnas con diferentes puntos de interrupción en función del tamaño de la pantalla.
El número de columnas se puede personalizar con CSS.

Básicamente para los que sabemos bootstrap es más de lo mismo un sistema en el cual puedes distribuir tus elementos en la pantalla con toda la ventaja de que es adaptable al dispositivo en donde se esta ejecutando.

Su uso:

<ion-grid>
  <ion-row>
    <ion-col size="6" size-sm="4">
      Primera Columna
    </ion-col>
    <ion-col size="2" size-sm="3">
      Segunda Columna
    </ion-col>
    <ion-col size="2" size-sm="3">
      Tercera Columna
    </ion-col>
    <ion-col size="2" size-sm="2">
      Cuarta Columna
    </ion-col>
  </ion-row>

</ion-grid> 

El atributo size es el tamaño de la celda que ocupara esa columna, la primera columna ocupará 6 posiciones y si se ejecuta en una pantalla pequeña ocupara solo 4.

Es una herramienta muy util para crear aplicaciones y distribuir los elementos en la pantalla.

Considera ser un Patreon para generar más contenido. Aqui te dejo el Link
Convierte en un Patreon y descarga todo el codigo!