Maquetando la web, CSS ¿Flexbox vs Grid ?, primeras impresiones.
Flexbox y Grid son dos implementaciones de CSS que resultan especialmente útiles de cara a la creación de páginas web. En un primer vistazo, tenemos que reconocer que Grid puede hacer cosas que Flexbox no puede hacer y Flexbox puede hacer cosas que Grid no puede hacer. Con la ventaja de que ambos pueden trabajar juntos: un elemento de Grid puede ser un contenedor Flexbox y un elemento de Flexbox puede ser un contenedor de Grid.
La principal diferencia entre estas herramientas es que Flexbox puede funcionar en filas o columnas, una a la vez, mientras que Grid, que es bidimensional, puede funcionar en ambas a la vez. Otra diferencia significativa es que Grid se basa en el diseño, mientras que Flexbox se basa en el contenido.
Los puntos fuertes:
CSS Grid es mejor para la construcción general de nuestra página, ya que es más fácil modelar nuestra plantilla, y se pueden crear diseños más asimétricos y peculiares.
Flexbox es mejor alineando el contenido dentro de los diferentes elementos de la web.
En principio parece un poco complicado, especialmente cuando se está comenzando a controlar la extraña forma de Grid y la rara sintaxis de Flexbox, por lo que no hay razón para utilizar sólo Grid CSS o sólo Flexbox.
En mi experiencia personal usando ambas herramientas existen aspectos de Grid que sobresalen con respecto a Flexbox:
- Mucha más flexibilidad: permite controlar los elementos en las 2 dimensiones y con total libertad.
- Menos código y menos bugs: reduce considerablemente el código empleado, lo que permite revisiones más sencillas y menor probabilidad de bugs.
- Optimización de recursos: código más simple y consistente se economiza tanto en tiempo como en recursos necesarios para mostrar la página.
- Responsive más sencillo: permite crear elementos dinámicos que se adaptan al espacio disponible independientemente de la solución de pantalla, permitiendo minimizar el uso de media querys.
Después de esta breve y concentrada comparación la mejor recomendación posible es aprender ambas herramientas y usarlas en conjunto. La web sigue siendo un fenómeno descomunal que evoluciona a un ritmo vertiginoso y siempre la mejor forma de enfrentarla es teniendo todas las herramientas disponibles al alcance de la mano.