CSS Grid, por qué usarlo y dejar Bootstrap

código css grid

CSS Grid es una nueva forma de crear diseños en la página web. Por primera vez, tenemos un sistema de diseño conveniente de forma nativa en el navegador, lo que nos ofrece muchos beneficios.

Estos beneficios se vuelven especialmente claros si equiparas CSS Grid con la librería más popular de todas: Bootstrap. No solo puede crear diseños que antes no eran posibles sin introducir JavaScript, sino su código va a ser más simple de sostener y comprender.

En el presente artículo, explicaré por qué razón.

Ahora veamos mis 3 razones primordiales por las que creo que CSS Grid supera a Bootstrap.

Tu código va a ser más fácil de entender.
El cambio de Bootstrap a CSS Grid va a hacer que tu HTML esté más limpio. Aunque este no es el beneficio más esencial, probablemente sea el primero que aprecies.

Para ejemplarizar esto, he creado un diseño falso para un sitio, de tal modo que podamos equiparar el código preciso para las 2 versiones. Aquí lo tienes:

porque usar css grid

Bootstrap


Veamos primero el código necesario para crear este sitio en Bootstrap.

código de ejemplo de bootstrap

Hay 2 cosas que quiero que veas aquí:

  • Cada fila debe ser su etiqueta <div>.
  • Tienes que usar clases para precisar el diseño (col-xs-2).
  • Conforme la complejidad del diseño crece, tambien lo hace el HTML.


Si fuera una página responsive, las etiquetas se verían incluso todavía peor:

código responsive

CSS Grid

Ahora veamos la forma de hacerlo de CSS Grid. Aquí está el HTML:

código de ejemplo con css grid

Se puede ver de forma instantánea que este código es mucho más simple. Se terminaron esos nombres de clases feos y las etiquetas div auxiliares precisas para cada fila. Es solo un contenedor para el grid, y elementos dentro de ella.

Y en contraste a Bootstrap, este código no aumentara mucho en dificultad conforme el tamaño del diseño crece.

No obstante, si bien el ejemplo de Bootstrap no requiere que añadas ningún CSS, el ejemplo de CSS Grid si lo requiere. Particularmente deberás agregar esto:

ejemplo código css para usar grid

Y eso podría ser un punto a favor de Bootstrap para ciertas personas: no deberías preocuparte por el CSS para crear una cuadrícula simple, puesto que sencillamente define el diseño en el HTML.

Como verás en el siguiente punto, este acoplamiento entre el código y el diseño es realmente una debilidad cuando se habla de flexibilidad.

Mucha más flexibilidad

Digamos que quieres cambiar tu diseño de acuerdo con el tamaño de la pantalla. Por servirnos de un ejemplo, vamos a mover el menú hasta la fila superior cuando se vea desde un móvil.

En otras palabras, cambiar el diseño de esto:

esquema de página web con css grid

A esto:

diseño responsive con css grid

CSS GRID

Hacer esto con CSS Grid es super simple. Solo agregaremos una media query y mezclaremos los elementos como queramos:

código responsive usando css grid

El hecho de que se pueda reordenar el diseño de este modo, sin preocuparse por el de qué forma se escribe el HTML, se llama independencia del orden de origen (source order independence), y es una enorme victoria para los desarrolladores y diseñadores.

CSS Grid te deja transformar HTML en lo que se supone que ha de ser. Marca de contenido. No visuales, que pertenecen a la CSS.

Bootstrap

Si quisiéramos hacer lo mismo en Bootstrap, deberíamos cambiar el HTML. Deberíamos desplazar la etiqueta del menú a la fila superior, aparte del encabezado, por que el menú está atrapado en la segunda fila.

diseño responsive con bootstrap

Hacer esto con media query no es trivial. No se puede hacer empleando solo HTML y CSS, con lo que debería comenzar a usar JavaScript.

Este ejemplo ilustra el mayor beneficio que he experimentado con CSS Grid hasta el momento.

No más restricción de doce columnas

Este no es un enorme inconveniente, pero me ha molestado en múltiples ocasiones. Como el grid de Bootstrap se divide en 12 columnas, vas a tener inconvenientes si quieres un diseño de 5 columnas, o de 7, o de 9 o de cualquier numero que no sume hasta 12.

Con CSS Grid, este no es el caso. Puedes hacer que tu grid tenga precisamente la cantidad de columnas que quieres. Aquí tienes un grid de 7 columnas.

diferentes columnas con css grid

Soporte del navegador
Antes que acabemos, deberíamos charlar sobre el soporte de los navegadores. En este instante, el 92.36% del tráfico global es compatible con CSS Grid.

soporte de css grid en los navegadores
Versiones de los navegadores que soportan CSS GRID

Observaciones finales

Por último, me gustaría compartir una cita de Jen Simmons, diseñadora y defensora de los desarrolladores en Mozilla. Ella describe exactamente el mismo sentimiento que tengo hacia CSS Grid tras conocerlo y usarlo:

Cuanto más empleo CSS Grid, más convencida estoy de que no hay beneficio al añadir una capa de abstracción sobre él. CSS Grid es el framework de diseño.

Jen Simmons
Si te ha gustado, compártelo en las redes sociales!
Etiquetas: