Llevo muchos años como diseñador de páginas web. Desde la temporada que se maquetaba todo con tablas y todo mundo usaba Frontpage y se creía que se programaba en HTML. En aquellos tiempos se tenía que lidiar con las tablas y que todo quede bioen ordenado. Todo un desastre, no quedaba bien a la primera.
Poco a poco las cosas fueron mejorando con CSS y CSS2 display block y “float” solucionaba en parte el maquetado. El uso de la propiedad float de CSS se convertía en un dolor de cabeza. Ordenar dos elementos con diseños no lineales, era imposible.
Hasta ese momento Bootstrap y otros Frameworks nos hacían la vida fácil. Ya que no teniamos que lidiar con el orden de los elementos, todo lo arreglaba con las columnas, Pero el uso de estos Frameworks de CSS hizo que todas las páginas webs sean iguales, ademas que a todos nos hizo mas perezosos. Tanto así que no investigue mucho o casi nada de flexbox, pues Bootstrap 4 ya lo traía por defecto y todas las maravillas de CSS3
Pero todo cambia cuando conocí Grid Layout, la maravilla que oculta (ni tan oculta) en CSS3
Que es CSS Grid Layout y porque cambia todo?
Es un sistema de rejilla para la maquetación web, estándar y ahora compatible en todos los navegadores. CSS Grid Layout es un sistema de rejilla en 2 dimensiones. Para ponerlo en práctica necesitas simplemente aplicar el nuevo «display: grid» y comenzar a usar sus propiedades y valores CSS.
Aplicar el sistema de rejilla es una auténtica maravilla, permitiendo hacer con muy poco esfuerzo cosas que antes necesitabas mucho código CSS, o que directamente eran imposibles de conseguir, al menos con tal versatilidad.
Diferencia entre CSS Grid Layout y Flexbox
Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo.
Si bien, flexbox se hizo muy popular antes, ambas comparten mucho de sus propiedades, por lo que aprender a maquetar con Grid Layout te sera mucho fácil. Pero igual a las personas que están comenzando su carrera como Frontend, les facilitará muchísimo a la hora de diseñar.
En palabras simples
– ¿Necesito controlar el diseño únicamente por filas o por columnas? – usa flexbox
– ¿Necesito controlar el diseño por filas y por columnas? – usa grid
Mozilla Developer
¿Porque CSS Grid Layout cambio mi vida?
Creo que para mi, hay un antes y un despues de Grid Layaout, no creo que sean solo tres, pero al menos escribiré las mas importantes:
1. Menos código
Soy de las personas que prefiere escribir un código corto y sencillo cuando estoy realizando alguna plantilla para wordpress o una landing page. Con Floats y Flexbox es imposible hacerlo. Siempre hay características en el maquetado que precisa mas código de lo que parece
2. Deje de utilizar Bootstrap
Por flojera y pereza seguí utilizando Boostrap, incluso en los proyecto mas pequeños, tenia que utilizar esta librería. Me sentía cómodo con la librería, me facilitaba todo con el sistema de columnas y la amplia documentación y comunidad que esta detrás de Bootstrap.
Al dejar de usar Bootstrap también deje de usar jQuery otra librería que me encerraba en un cuarto oscuro y no me dejaba aprender javascript decentemente.
3. Aprendo CSS nuevamente
Aprender Grid Layout me abrió nuevamente la curiosidad de aprender, sobre todo CSS3. Un lenguaje que día a día va evolucionando y es para ser un frontend profesional tienes que estar al día y usar bootstrap no me dejaba crecer en ese aspecto.
Por eso digo que CSS Grid Layout me cambio la vida, ahora tengo que dar unos pasos hacia atras y aprender todo lo que CSS3 y Javascript tiene para ofrecer.
