¿Por qué CSS Grid es la mejor opción para crear diseños?

CSS Grid es una nueva forma de crear diseños web y en poco tiempo se a convertido en la mejor. Por primera vez, tenemos un sistema de disposición apropiado de forma nativa en el navegador y a nuestra total disposición, lo que nos brinda una considerable cantidad de beneficios como por ejemplo: tu código será más fácil de comprender y mantener.

Estos beneficios se vuelven increíblemente visibles si compara CSS Grid con los frameworks más populares como Bootstrap o Foundation ya que ahora puedes crear diseños que anteriormente no eran posibles sin introducir JavaScript.

Un claro ejemplo es Pinterest

Ahora veamos mis principales razones por las que creo que CSS Grid supera a Bootstrap, Foundation o cualquier otro sistema de grillas creado anteriormente, pero en este caso hablaremos de Bootstrap.

• 1. No más limitaciones de 12 columna.

Algo que no debería ser un gran problema, pero hay ocasiones en las que resulta molesto es el hecho de tener limitaciones para trabajar en las columnas de nuestro sitio web. Como la cuadrícula Bootstrap está dividida en doce columnas, llegaras a tener muchos problemas si quieres un diseño de 5 columnas, 7 columnas, 11 columnas. O cualquier cosa que no sume 12.

Con CSS Grid, olvidamos totalmente este problema. CSS Grid Puede hacer que nuestra cuadrícula tenga exactamente la cantidad de columnas que deseamos ya sean 5 columnas, 7 columnas , 9 columnas o una cantidad explícita.

• 2. Soporte del navegador

Otro punto clave es del cual debo comentarles es soporte del navegador. En el momento de escribir este post, el 87% del tráfico del sitio web global es compatible con CSS Grid

• 3. Mucha más flexibilidad

Supongamos que deseas cambiar el diseño de acuerdo con el tamaño de la pantalla. Por ejemplo, llevar el menú a la fila superior cuando el usuario lo vea desde un dispositivo móvil.

En otras palabras, cambie el diseño de A > B:

Hacerlo con CSS Grid

Hacer esto con CSS Grid es tan simple como que agregaremos una media query, y mezclaremos los elementos como queramos:

@media screen and (max-width: 680px) {
  .header {
    grid-column: span 6;
  }

  .menu {
    grid-row: 1;
    grid-column: span 6;
  }

  .content {
    grid-column: span 12;
  }
}

Hacerlo con Bootstrap

Si quisiéramos hacer lo mismo en Bootstrap, tendríamos que cambiar el HTML. Tendríamos que mover la etiqueta del menú hasta la fila superior, además del encabezado, ya que el menú está atrapado en la segunda fila.

"row">
    "col-xs-12 header">Headerdiv>
div>
"row">
    "col-xs-4 menu">Menudiv>
    "col-xs-8 content">Contentdiv>
div>
"row">
    "col-xs-12 footer">Footerdiv>
div>

• 4. Mas Ligero

Uno de los Retos propuestos en el Curso de CSS Grid Layout se propuso realizar un Sitio Web aplicando los conocimientos ya adquiridos anteriormente de CSS Grid el cual se llama Movie_Es, este proyecto tuvo un peso final excesivamente ligero :

Hacer este mismo proyecto con Bootstrap supondría tener un peso superior asegurado en comparación con CSS Grid

En Conclusión

Quiero concluir este post recomendandote que aprendas CSS Grid y te garantizo que no tendrás que recurrir mas a frameworks externos, no tendrás que aplicar PostCSS y tampoco tendrás que maniobrar con Flexbox para obtener el resultado deseado. ¡CSS GRID LAYOUT HOY EN DIA ES UN SUEÑO ECHO REALIDAD!.