Grid multidispositivo

Un sistema de rejilla o grid también se aplica en movilidad, teniendo en cuenta que estamos hablando de una web responsive que se debe adaptar a los distintos formatos.

La base desktop consta de una grid de 12 columnas que se adapta así a los distintos dispositivos, para tablet también de 12 columnas y para móvil de 4 columnas. Dándose unos puntos de salto donde se realizan las adaptaciones pertinentes.
Para pantallas de ordenadores y portátiles se baraja con una resolución de 980 px a 12 columnas. Teniendo un tamaño de columna de 60 px y de calle de 20 px.
A partir de este tamaño para abajo los elementos de interacción se convierten en táctiles, con el correspondiente cambio de apariencia y distribución.
Para tabletas, donde el tamaño estándar es muy variado, se establece una grid también de 12 columnas ajustada para una resolución de 640 px. De modo que las columnas tienen un ancho de 40 px y las calles de 12 px, siendo los márgenes laterales de 12 px.
Para móvil, manejamos un tamaño base de 320 px y una grid de 4 columnas (que realmente es una agrupación de la anterior grid de 12 columnas, en 4 bloques de 3 columnas cada una). Con un ancho de 72 px cada columna y una calle entre ellas de 6 px. Los márgenes laterales son de 7 px.

  • Hola, esto es un comentario.
    Para empezar a moderar, editar y borrar comentarios, por favor, visita la pantalla de comentarios en el escritorio.
    Los avatares de los comentaristas provienen de Gravatar.