El día en que cambió la vida del desarrollador Front End: Grid (Parte II)
Ya sabemos que la vida del desarrollador Front End nunca fue fácil. Sin embargo, gracias a los últimos avances, cada vez podemos desarrollar layouts más complicados utilizando un código más sencillo. Aquí es donde entra en juego Grid.
Flex no sirve para todo
Aunque ya vimos que Flex nos solucionaba gran parte de los problemas que teníamos antiguamente con tablas y floats, existen otros tipos de layouts que no son tan fáciles de maquetar únicamente utilizando esta tecnología. Es aquí donde entra en juego Grid que es una especificación de CSS para realizar cualquier tipo de layout de dos dimensiones. Aunque parezca sencillo, esta especificación ha tardado en convertirse en estándar (y en ser soportada por la mayoría de navegadores) más de ocho años.
Allá por 2010 / 2011, uno de los padres de la web, Bert Boss, detectó que había un gran problema en el desarrollo de webs hasta el momento. Los principios fundamentales de HTML y CSS defienden que estos lenguajes deben comportarse como entidades independientes, pero están relacionadas: HTML para el marcado y CSS para el estilo.
Un problema tradicional del marcado HTML es que se utilizan elementos del lenguaje (tablas, divs, p, span, etc.) para determinar cómo se deberían de colocar espacialmente en cada web. Al hacer esto, se rompe directamente con los principios fundamentales de HTML y CSS mencionados anteriormente. Es por ello que se pensó en desarrollar un estándar que permitiera colocar los diferentes elementos de HTML de una web sin necesidad de abusar de tablas anidadas y floats imposibles mediante CSS. Gracias a este nuevo estándar se podrían realizar layouts más complicados sin necesidad de penalizar el marcado de la página web y, por consiguiente, su legibilidad y mantenibilidad.
De esta manera, surgió el CSS Template Layout Module, que sería el precursor de lo que es ahora Grid. Por aquella época, desarrollé para mi Proyecto Fin de Carrera una aplicación que te permitía, de manera visual, crear tu propio “template” y ver el CSS resultante. Obviamente, aquella implementación era bastante básica y rudimentaria y todo ha cambiado mucho desde entonces :).
Grid es tu amigo. Ventajas de utilizar Grid
Después de todo lo que ha costado tener una implementación estandarizada para realizar layouts avanzados en CSS sin mucho esfuerzo, no utilizar Grid sería como seguir anclado en el pasado.
¿Cuáles son sus ventajas?
- No tenemos que sacrificar marcado por estilo
- Podemos coger cualquier página que ahora mismo tengamos desarrollada y convertirla a diferentes tipos de Grid, sin necesitar cambiar nada de nuestro marcado HTML.
- Podemos coger cualquier página que ahora mismo tengamos desarrollada y convertirla a diferentes tipos de Grid, sin necesitar cambiar nada de nuestro marcado HTML.
- No necesitamos escribir grandes cantidades de código
- Con pocas líneas de código podemos colocar los mismos elementos de HTML en diferentes posiciones en función del estilo de cada página.
- Es muy amigo de los móviles
- Utilizando media queries es muy sencillo convertir un layout de escritorio en un layout de móvil sin necesidad de cambiar nada de nuestro marcado HTML.
- ¡Es el futuro! ejem... ¡presente!
- Por fin está implementado en la gran mayoría de navegadores comerciales, así que no hay excusa para no utilizarlo.
Show me the money
Vamos a ver un ejemplo muy sencillo de un layout general de una página con cabecera, menú, cuerpo, sidebar y footer.
Ahora vamos a “estropearlo” todo, cambiando los elementos de sitio, sin cambiar para nada el marcado HTML.
En el primer ejemplo, además, si cambias el tamaño de la pantalla, verás como los elementos se van colocando de manera adecuada. Fácil, ¿no?
Entonces, ¿nos cargamos Flex?
¡Ni se te ocurra! Flex y Grid son complementarios y se ayudan el uno al otro. Una práctica general para saber cuando utilizar Grid y cuando Flex es determinar si lo que queremos hacer es un layout unidimensional (tanto horizontal como vertical) o bidimensional.
Cada cosa hay que utilizarla para lo que es. Si simplemente tenemos un listado de elementos en horizontal o vertical, que tienen características similares y que siempre guardan patrones parecidos, utiliza Flex. Si existen elementos diferentes, que pueden colocarse en diferentes posiciones según el tamaño de la pantalla, o si el layout es demasiado complicado como para acometerlo con Flex, utiliza Grid. En la práctica está la perfección, te irás dando cuenta con el tiempo en qué ocasiones debes utilizar Flex y el cuáles Grid.
Más ejemplos
El ejemplo de código que hemos visto es muy sencillo y solamente hemos visto una parte muy pequeña de todo lo que es capaz de hacer Grid. Existen multitud de ejemplos online, pero yo os recomiendo las siguientes páginas de referencia.
¿Aún no te he convencido?
Si no quieres seguir anclado en el paleolítico del desarrollo web, pegándote con tablas, floats, positions y otras reglas de CSS que toda la vida se estuvieron utilizando para lo que no se debería, adelante. Sin embargo, si quieres dar un salto de gigante en tus desarrollos y ahorrar un montón de tiempo intentando que hacer éstos se vean bien en los diferentes navegadores, deberías empezar ya a utilizar Flex y Grid.
