Entendiendo la Grilla Adaptable de Material Design

Material Design | | Comunidad: Crear un Post, Eventos Devs, Foro

Otro de los framework para el desarrollo Frontend más importantes del medio es Google Material Design que nos ofrece una gama amplia de elementos y componentes para ser usados en un proyecto, pero vamos a partir de la grilla responsive que es la base en donde reposan todos los objetos que empleamos, veamos en este artículo todos los detalles.

imagen: material.io

Puntos de Corte o Ruptura

En Material Design vienen a ser los rangos de tamaños predeterminados de una pantalla. En un determinado punto de corte o ruptura el diseño se ajusta para adaptarse al ancho, alto, tamaño y orientación de la pantalla.

Sistema de punto de Ruptura

Material Design nos proporciona diseños adaptables en base a una estructura de columnas, las columnas pueden ser de 4, 8 y 12 columnas disponibles para diferentes pantallas y dispositivos.

Cada Rango de punto de corte (dp) determinará en número de márgenes y columnas que se mostrarán en pantalla:

Rango de punto de corte (dp)RetratoPaisajeVentanaColumnasMárgenes / Cunetas
0 – 359pequeño auricularxsmall4dieciséis
360 – 399auricular medianoxsmall4dieciséis
400 – 479auricular grandexsmall4dieciséis
480 – 599auricular grandepequeño auricularxsmall4dieciséis
600 – 719tableta pequeñaauricular medianopequeña8dieciséis
720 – 839tableta grandeauricular grandepequeña824
840 – 959tableta grandeauricular grandepequeña1224
960 – 1023tableta pequeñapequeña1224
1024 – 1279tableta grandemedio1224
1280 – 1439tableta grandemedio1224
1440 – 1599grande1224
1600 – 1919grande1224
1920 +xlarge1224

 

Composición de la Grilla Responsive

Básicamente la grilla esta compuesta por 3 elementos muy importantes que son:

  1. Columnas
  2. Cunetas
  3. Márgenes

imagen: material.io

Vamos a detallar uno por uno a continuación.

Columnas

Las columnas son elementos fundamentales en la mayoría de Framework, en Material no es la excepción, el tamaño de una columna se define por porcentajes en lugar de medidas fijas, esto hace que una columna sea adaptable a la pantalla de un dispositivo determinado.

La cantidad de columnas que aparecerán en la grilla depende del tamaño de la pantalla de un dispositivo que presente un punto de corte. Por ejemplo a continuación una cuadrícula que tiene un punto de corte de 360 dp, entonces nos mostrará un diseño basado en 4 columnas.

imagen: material.io

Si usamos un dispositivo tablet o tableta, se crea un punto de corte de 600 dp, por lo que veremos un diseño con 8 columnas:

imagen: material.io

Cunetas

Entre las columnas existen espacios que separan a las columnas y por ende separan también el contenido. A diferencia de las columnas, las cunetas tiene valores establecidos en cada rango de interrupción o separación, el ancho de una cuneta puede cambiar en diferentes puntos de corte, cambia según el ancho de cada dispositivo. Las cunetas más amplias son ideales para pantallas más grandes porque crean espacios en blanco más amplios entre las columnas

En un dispositivo móvil, específicamente un celular que cuente con un punto de corte de 360 dp, nos crea un diseño con 16 dp de ancho en las cunetas.

imagen: material.io

Si usamos una tableta o tablet que cuente con un punto de corte de 600 dp, esta nos mostrará un diseño con 7 cunetas, cada cuneta con un un ancho de 24 dp:

imagen: material.io

Márgenes

Para Material Design los márgenes son los espacios entre el contenido y los bordes del lado derecho e izquierdo de la pantalla. El ancho de los margenes izquierdo y derecho cuenta con valores fijos en cada punto de corte.

Para que el diseño se adapte de manera óptima en un dispositivo los margenes pueden variar según la pantalla de cada dispositivo y los margenes más amplios son los ideales para pantallas grandes porque crean más espacio o margen en blanco alrededor del perímetro del contenido.

Si visualizamos el diseño en un móvil o celular con un punto de corte de 360 dp de ancho se nos mostrarán margenes de 16 dp de ancho:

imagen: material.io

Y si visualizas un diseño en una tablet o tableta con un punto de corte de 600 dp de ancho, nos cargarán los 2 margenes, el izquierdo y derecho con un ancho de 24 dp cada uno:

imagen: material.io

Grillas Horizontales

Para las interfaces táctiles se puede personalizar una grilla sin problemas de manera horizontal, basta con entender como funciona desde esa perspectiva. Una grilla horizontal es similar a la grilla normal, pero cambia el orden de los elementos que son:

  1. Columnas
  2. Cunetas
  3. Márgenes

imagen: material.io

En la imagen anterior tenemos una pantalla con 400 dp de alto y puedes ver que las columnas se desplazan de arriba hacia abajo junto con las cunetas y los márgenes vendrían a ser la parte superior e inferior de la pantalla.

Este tipo de grilla horizontal no es muy común verlas en plataformas webs o dispositivos no táctiles, es bueno saber que existe este tipo de grilla y usarla cuando llegue el momento.

Las grillas horizontales se pueden colocar en diferente altura, esto nos permite colocar otros elementos en la parte superior de la grilla sin problemas:

imagen: material.io

En próximas versiones de Material Design, pueden cambiar las estructuras y elementos que lo componen, hasta la fecha de este artículo son las correctas.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments