Grid vs Flex

<< gap y alineación Variables >>

¿Cuál uso?

Esta es la pregunta más común. La regla general es:

  • Flexbox es para maquetar en una dimensión (una fila o una columna). Es perfecto para alinear elementos en una línea, como los ítems de un menú de navegación o tarjetas en una fila.
  • Grid es para maquetar en dos dimensiones (filas y columnas a la vez). Es ideal para la maquetación general de la página (header, sidebar, contenido, footer) o cualquier diseño complejo que necesite alineación en ambos ejes.

No son enemigos, ¡se complementan! Es muy común usar Grid para la estructura principal de la página y Flexbox para organizar los elementos dentro de esos componentes.

<< gap y alineación Variables >>