Qué es un Grid de Diseño

Un grid es una cuadrícula para maquetar el contenido de tu página bajo unas guías básicas. Éstas darán estabilidad al diseño, alineación y homogeneidad. Es cierto que además, ayudan al Responsive (el diseño adaptable o adaptativo), porque con pocas reglas de CSS, consigues un diseño perfecto para a todos los dispositivos.

Cada grid vertical se compone de dos cosas: columnas (cols) y calles (gutters). Las columnas son las divisiones más amplias, mientras que las calles se definen como los espacios de igualdad entre las columnas, lo que en maquetación de papel se llama medianil. Incluso cuando una cuadrícula contiene columnas de diferentes anchos de las anchuras de las calles suelen ser estáticas.

Que uses un grid no significa que tengas un diseño web responsive. Sino que sigues unas líneas de maquetación.

Grids pensados para el Responsive Design

El diseño responsive utiliza las queries de CSS para que haya diferentes estilos dependiendo de parámetros como el tamaño de pantalla, resolución u orientación. Esto significa que podrás variar el tamaño, visibilidad, color o forma de los elementos en un tamaño determinado de la pantalla del dispositivo. Si falla en Explorer antiguos es porque no traen el Respond.js, quizás puedas implementarlo tú mismo.

Por qué usar un Grid con Diseño Web Responsive

La adaptación a los diferentes dispositivos ya no sólo es una recomendación para facilitar a tus lectores la utilización de tu web, sino que puede afectar a tu posicionamiento o aparición en Google (te recomendamos que te leas este post de cómo no tener adaptada tu web a dispositivos móviles puede afectarte en buscadores). Google quiere que todo se vea bien para garantizar la mejor experiencia de navegación a los usuarios. Este es un ejemplo de diseño responsive en diferentes dispositivos: ordenador de sobremesa, tableta y móvil.

Diferente colocación de los elementos dependiendo del dispositivo.

Diferente colocación de los elementos dependiendo del dispositivo.

“Empieza con el diseño de tu móvil y de ahí saca el de tu web. De menos a más.”

Algunos Framework para Diseño Web Responsive con Grid

El uso de framework o herramienta para maquetación web es en algunos casos más que una cuadrícula adaptable. Algunos ofrecen estilos de diseño, iconos y elementos gráficos. Ten cuidado con el peso de estas herramientas pues influirá en la velocidad de carga de tu página.

1. 1140 CSS Grid

Grid Responsive

Grid Responsive

Han decidido pasar de los clásicos 960px y van a por los 1140px. Hasta 12 columnas como casi todos los que verás. Responsive, por supuesto, en 4 saltos de querie. Parece que lo han jubilado según el autor en su blog, pero lo dejo porque mucha gente lo habrá usado.

2. 960 Grid System

Grid de Diseñño Web Responsive 960 GS

Grid de Diseñño Web Responsive 960 GS

Ya para los libros de historia. No es responsive, pero fue el mejor en su momento.  Te remiten a UNSEMANTIC si quieres estar al día. Es con sistema FLUIDO de adaptación, no fijo.

3. Columnal

Grid de Diseño Web Responsive Columnal

Grid de Diseño Web Responsive Columnal

Un remix de otros grids. 12 columnas. Con las plantillas de los Wirerfames. Simple y ligero. También es bajo adaptación FLUIDA, no por saltos de maquetación fija y controlada. Mewww.

4. Css Wizardry

Grid Responsive CSS WIZARDRY

Grid Responsive CSS WIZARDRY

Un nuevo concepto del diseño al comenzar por el estilo para móvil. Interesante propuesta. Puede usar SASS. Máximo 6 columnas, ¿Para qué más? Sí bueno, que no fuera fluida. Pero nadie es perfecto… ¿O sí? Mira más abajo.

5. CSS Smart Grid

Grid de Diseño Web Responsive CSS SMART GRID

Grid de Diseño Web Responsive CSS SMART GRID

Basado en 960 Grid System, pero con responsive y sólo 1,2 KB. Usa SASS si quieres. Simple y funcional. Busca el diseño de “MOBILE FIRST” (empieza por el móvil).

6. Dead Simple Grid

Responsive Grid DEAD SIMPLE

Responsive Grid DEAD SIMPLE

El más ligero de todos. Ultrasimple y sólo pesa 250 bytes. Pocas opciones e infinidad de usos. Para todos los navegadores, claro. Otro de maquetación adaptada por FLUIDA, no por saltos. Esto es bueno quizás para móvil, pero no lo recomendamos.

7. Elliot Jay Stocks

Grid Responsive Elliot Jay

Grid Responsive Elliot Jay

Buah… responsive flexible, poco recomendado por lo simple que es… pero bueno, el chaval lo vende como maravilloso. 1000 px de contenedor y 6  columnas. Atrevido. Le falta que las columnas colapsen al 100% en el salto de móvil. Pero nada.

8. Extra Strenght RG

Grid de Diseño Web Responsive EXTRA STRENGTH RG

Grid de Diseño Web Responsive EXTRA STRENGTH RG

Muy flexible y adaptable sistema de Grid. Utiliza SASS si quieres. Parece una opción más juguetona si quieres tener más opciones de maquetación. Tendrás que estudiártelo un poco si quieres sacarle el jugo. De base falla un poco el responsive.

9. Fluid Baseline Grid System

Grid Responsive Fluid Baseline

Grid Responsive Fluid Baseline

Simple y directo responvive. 6 saltos: a los 320px, 480px, 600px, 768px, 1024 y 1280px o más. Pero fluido.

10. Foundation

Grid Responsive Foundation

Grid Responsive Foundation

Ya en su versión 5. Este GRID fue pionero con el responsive. Quizás no el más ligero, pero con muchas customizaciones y opciones tanto de maquetación, como de diseño. Recomendado.

11. Frameless

Grid Responsive FRAMELESS

Grid Responsive FRAMELESS

Me encanta el diseño de su web. El sistema en sí es bastante bueno. Lo puedes usar con LESS, con SASS. Te dan el PSD. Una joyita.

12. Golden Grid System

Grid Responsive GOLDE GS

Grid Responsive GOLDE GS

8 columnas en diseño responsive fluido. Buena web e interesante propuesta de “resize”.

13. Gridiculo.us

Grid de Diseño Web Responsive GRIDICULO

Grid de Diseño Web Responsive GRIDICULO

6 columnas y hasta 1200px de ancho. Tiene una versión para WordPress.

14. Griddle

Grid Responsive GRIDDLE

Grid Responsive GRIDDLE

Muy moderno el uso de CSS para colocación. Sólo soportado en navegadores actualizados por eso mismo. Anidaciones, centrados…

15. Less Framework

Grid Responsive LESS F

Grid Responsive LESS F

992px. Utliza CS3. Lo bueno es que ofrece hasta 4 maquetaciones posibles, con 3 set de tipografías y todo en un simple grid.

16. Neat

Grid Diseño Web Responsive NEAT

Grid Diseño Web Responsive NEAT

Este Grid es de tipo semántico, no incrusta HTML para el estilo. Utiliza SASS. Puedes ver varios ejemplos de este grid en su página de Bourbon.

17. Profound Grid

Grid Responsive PROFOUND GRID

Grid Responsive PROFOUND GRID

Construido con SCSS, semántico y por supuesto responsive. Permite anidación de columnas y CSS especial más allá de las columnas. Interesante.

18. Proportional Grids

Grid Responsive PROPORTIONAL GRIDS

Grid Responsive PROPORTIONAL GRIDS

Este grid funciona con el sistema de diseño Fluido, es decir sin saltos de diseño por queries en ciertas dimensiones. La verdad es que no solemos utilizar el incontrolable diseño fluido.

19. Responsive Grid System

Grid Diseño Responsive RSG

Grid Diseño Responsive RSG

Puedes usar su sistema básico de 12 o elegir tú el número de columnas y margen. Simple y funcional.

20. RWD Grid

Grid Responsive RWD GRID

Grid Responsive RWD GRID

Es como 960 Grid System, pero con el Responsive aplicado. Ligero y limpio. Se convertirá en un clásico.

21. Semantic

Grid Responsive SEMANTIC

Grid Responsive SEMANTIC

También con LESS, SCSS, o Stylus. Ofrece maquetación Fluida o Fija (la que nos gusta). Maquetación anidada, responsive y rock and roll.

22. Simple Grid

Grid Responsive SIMPLE GRID

Grid Responsive SIMPLE GRID

12 columnas en 1140px como base. Algo poco común, pero más moderno porque realmente quedan pocos monitos de 1024px. Muy limpio y poco pesado.

23. Skeleton

responsive_css_grid_01skeleton

Grid Responsive SKELETON

960px y 12 columnas. Un clásico de los GRID de diseño web.  Ofrece una buena gama de botones, formularios, listas, tableas y estilo ya preparados para todos los navegadores. Lo utilicé en su momento.

24. Twitter Bootstrap

Grid Responsive BOOTSTRAP

Grid Responsive BOOTSTRAP

Más que un Grid es un Way of Life. Como dicen ellos: “Creado por Nerds, para Nerds”. Además de su grid de 12 columnas para 940px, llega su adaptación, vía comando VIEWPORT a localizar el dispositivo para moverse hasta 1170px.

Además incluye todo tipo de elementos de diseño, de gráficos e iconos, ayuda en formularios. También maquetación fija o fluida. Puedes acceder a toda su documentación ya que merece la pena echarle un ojo para ver todo su potencial.

25. Zen Grids

Grid Responsive ZEN G

Grid Responsive ZEN G

Su web no puede ser más fea. Utiliza SASS. Opción de Fluida o fija. Un poco de todo… y a estas alturas del blog esto es más de lo mismo… pero más feo.

Herramientas para crear tu propio Grid Responsive

Si extráñamente no te convence ninguno de los Grid de diseño web anteriores, es hora de hacer los cálculos para crear el tuyo:

  • Determinar el ancho total del sitio.
  • Establecer un ancho de canal.
  • Determinar el número de columnas

Gridpak y Responsify. Estas herramientas te proporcionarán el CSS para las medidas que tú quieras.

Plantillas de Photoshop

En general cualquiera de estos Frameworks te ofrecerá por un lado un conjunto de archivos que formarán el paquete web (HTML, JS, CSS). También te podrás descargar el PSD para que trabajes el diseño y en todo el trabajo previo ya se esté teniendo en cuenta la maquetación. Ahí la desventaja de crear tu propio grid.

Agradecimientos a los artículos de Designinstrut

Volver al glosario
Agencia de Branding

Somos una agencia de branding. Todos nuestros proyectos tienen algo en común: la creatividad y la estrategia. Contáctanos si tienes un proyecto o si te gustaría saber más sobre nuestro método de trabajo.

Conócenos