CSS: Grids y tablas con responsividad en la Web

Grids consisten en dividir una proporción de la pantalla del usuario en partes iguales con espaciado entre ellas. Similar al antiguo sistema de table que teníamos, pero de manera receptiva, para que el sitio brinde una excelente experiencia de usuario.Los smartphones son prácticamente parte de las manos de todos los que tienen uno, todo el tiempo accedemos a apps de todo tipo (incluso recordando beber agua) y en ocasiones incluso nos olvidamos que detrás de muchas de estas hay una versión web que funciona tan bien cuánto.

Con el nivel de experiencia en el uso de las aplicaciones, la web se vio obligada a tener un estándar de calidad superior y una de las bases de esta experiencia es que un sitio sea realmente responsivo y eso es exactamente lo que veremos con más detalle en la publicación de hoy. y entender el concepto de grid del que se habla mucho.

¿Qué es el Grid?

La idea de tener un grid consiste básicamente en dividir una proporción de la pantalla del usuario en partes iguales, con espaciamiento entre ellas. Esto ya existía desde el principio, cuando trabajábamos con columnas y celdas en el momento en que los sitios se hacían en tablas.

Como las tablas no son muy flexibles y ninguna otra tag de html tenía un estilo estándar siguiendo esta idea de dividir por partes iguales para definir una estructura, cuando surgió la necesidad de hacer diseños para múltiples dispositivos de diferentes tamaños, la cosa empezó a complicarse y muchos sitios antiguos que no se han actualizado todavía siguen hoy con un desplazamiento lateral.

Con los diferentes tipos de pantallas que existen, el código CSS necesitaría tener muchas adaptaciones para que todo funcione si no hubiera un grid que sirviera como un lenguaje común con respecto al ancho de las cosas entre los diseñadores y los front-enders, porque el layout de un proyecto podría venir teniendo cada elemento un valor que cambiaría en las más diversas resoluciones, la idea es trabajar menos con valores fijos y más con valores relativos en css.

¿Y cómo hacer un grid con código?

Bueno, la mejor manera de introducir la parte del código es volver a la idea de dividir la pantalla en columnas del mismo tamaño como en la siguiente imagen:

Imagina que 12 significa el 100% del área disponible y 6 significa el 50% de esa área máxima donde se pueden presentar al usuario uno o varios contenidos, esta área se suele llamar contenedor.

• Contenedor: Estructura que sirve de base para trabajar con columnas.

• Columnas (col): Estructura que divide espacios dentro de un contenedor (se puede hacer con combinaciones de float y width, flexbox o incluso en la parte superior de la Grid Layout de CSS)

• Gutter: es el nombre del espaciamiento que se da entre las columnas de un grid, en el modelo que hicimos lo definimos con padding en las columnas

• Row: En el ejemplo no lo puse en todos los casos, pero podríamos crear este elemento que serviría como divisor horizontal dentro de los grids y que resetea el padding aplicado al contenedor, dejando las columnas con el máximo tamaño posible en su interior.

  Los nombres de las clases CSS aquí terminan considerando cada parte del grid como algo único, pero nada te detiene organizar el CSS como mejor te parezca con algo como BEM CSS, siempre que sea fácil de usar y mantener para su equipo durante todo el proyecto.

  Pero, ¿cómo funciona esto en responsivo?

  Trabajando con Media queries y Grids

  Para que este grid sea responsivo, simplemente agregue media queries que cambien el tamaño de nuestro contenedor:En la práctica, los grids que hacemos hoy se basan en algunas convenciones, como que la pantalla más pequeña del teléfono celular es la del iPhone 4 que tiene 320px de píxeles reales, la pantalla promedio de una tableta tiene 480px, la pantalla promedio de una computadora desktop tiene 1120px y así sucesivamente. (Estos valores pueden variar según cada proyecto y pantallas del momento). Sobre esta base, el diseñador del proyecto imagina cómo se puede distribuir el contenido dividiendo el área máxima posible de mostrar el contenido, también denominado contenedor en muchos casos, y en columnas.

  Bootstrap 4: ¿Grids con Flexbox?

  Bootstrap 3 tenía el estilo anterior de grid con float que vimos y en su nueva versión usando flexbox algunas cosas cambiaron:

  • Contenedor: la idea aquí sigue siendo la misma

  • Row: Ahora row tiene la función de aplicar flexbox a elementos secundarios.

  • Col: Un col solo tiene el comportamiento de ocupar el área máxima disponible y con más de una esta se ajusta automáticamente

  • Cada col todavía tiene un gutter de espaciamiento horizontal predefinido

  • Col-X: X es el número de columnas que ocupará un elemento, esto se hace con una combinación de flex-basis y max-width

  Hay otras variaciones sobre cómo usar el nuevo grid de bootstrap, si desea profundizarse más, eche un vistazo a la documentación de ellos e imagino que ahora será más fácil de usar :)

  Grids con Grid Layout

  Siguiendo la idea de solucionar algunos problemas de CSS, como centralizar las cosas, la spec de Grid Layout surgió como una forma de tener algo de la propia plataforma web para lidiar con grids.

  Aunque el nombre de una idea sería la solución mágica cuando hablamos de este tema, vale la pena recordar que la simplicidad del código es importante y en muchos casos el uso de esta nueva spec puede hacer que el código sea más complejo / confuso, así que usa con parsimonia y si quieres saber más sobre esto te indico esta publicación de alura. Y también hay este pequeño juego súper genial que te guiará a través de las diversas propiedades de la spec

  ¿Cómo simular fácilmente diferentes tipos de pantallas en la vida cotidiana?

  

  Para simular diferentes resoluciones a diario, no olvide que las herramientas de desarrollo de la mayoría de los navegadores, actualmente tenemos un icono que habilita un modo en el que es fácil cambiar de resolución.

  

  Sistemas de diseño

  Si te interesa grid, te dejo el consejo de que aprendas también sobre sistemas de diseño. Mucha gente descubre este tema observando cómo alguna marca organiza sus componentes a través de alguna herramienta como Storybook, hoy en día las formas de documentar y organizar componentes son el bombo del momento en el mundo Front End y tomar referencias puede ayudarte mucho para llegar a algo más sólido en las interfaces donde trabajas.

  ¿Sitio web con grid responsivo o sitio web con versión mobile?

  Esta pregunta es común para quienes se acercan a la web y lo que puedo decir es que depende mucho. Como primera opción, incluso pensando principalmente en el mantenimiento, es mejor tener solo un sitio web, un código con solo una base de código ayuda a evitar bugs y en muchos casos a estar replicando código o creando estrategias para compartir. Aplicaciones gigantes como facebook tienen su versión específica para sitios mobile porque la interfaz es tan compleja que la solución más rápida terminó siendo crear un nuevo sitio, pero piénsalo y antes de despedirme aquí, te dejo esta excelente publicación de Sérgio Lopes sobre diseño responsivo

  Conclusión

  Hoy aprendimos que la base de grids consiste en entender qué son los Contenedores, Row y Col. Ya sea con un diseño float, flexbox o grid, lo importante es poder hacer que cualquier sitio que vaya a desarrollar sea responsivo de una manera fácil.

  Si desea obtener más consejos sobre el mundo de Front End, consulte mi serial aquí en alura Fronteras del Front End

  Eso es todo por hoy, espero que lo hayan disfrutado, pronto les traeré más consejos sobre varios otros temas relacionados con Front End, asegúrate de seguirme en mis redes sociales y sigue mis demás artículos en mi sitio web personal. https://mariosouto.com.

  

  Mario Souto

  Vivo en 220v, siempre buscando una nueva película / paseo y codificando desafíos aleatorios en JavaScript. Me encanta hacer sitios web y hablar/enseñar sobre eso.

Puedes leer también:

• CSS: animaciones en Transition y Animation
• Creación de componentes CSS con el estándar BEM
• Creando Layouts con Css Grid Layout
• Cómo organizar el CSS en tu proyecto
• Empezando con el desarrollo web Front-end