Los falsos duelos: seis mitos sobre Grid y Flex

Buena parte de las discusiones de equipo sobre Grid y Flexbox no son técnicas: son restos arqueológicos de 2017, cuando Grid acababa de llegar, la documentación era escasa y el soporte desigual obligaba a escribir reglas que hoy no tienen sentido. Seis creencias concretas siguen circulando y todas son falsas o están tan mal formuladas que hacen más daño que un error puro.

Mitos sobre el reparto de trabajo

Mito 1: Grid es para la página y Flex para los componentes

Es la más extendida y la más inofensiva en apariencia, porque acierta en muchos casos por coincidencia. Falla en los dos sentidos. Grid dentro de un componente diminuto es la respuesta correcta siempre que haya solapamiento (grid-area compartida) o filas que deban absorber sobrante (grid-template-rows: auto 1fr auto). Y Flexbox a escala de página es la respuesta correcta para una plantilla de tres bandas donde la del medio crece, que se escribe con flex-direction: column y flex: 1 en dos líneas.

La escala no es un criterio. La estructura sí.

Mito 2: Flexbox es más rápido

Nunca fue cierto de forma general. Los dos algoritmos son lineales en el número de hijos en el caso normal; el dimensionado de pistas de Grid es más caro por elemento, pero suele haber menos contenedores porque una rejilla sustituye a varios envoltorios flex anidados. Y en el caso patológico —contenido intrínseco que obliga a varias pasadas de medida— los dos sufren igual.

Lo que sí es medible y sí importa es otra cosa: cuántos elementos se recalculan cuando algo cambia. Un contenedor de layout con cincuenta hijos directos recalcula cincuenta hijos ante cualquier cambio de tamaño, sea grid o flex. La optimización real no es cambiar de módulo, es aislar el subárbol con contain o reducir el número de hijos directos. Antes de reescribir nada, mide con el panel de rendimiento y mira el tiempo de la fase de layout.

Mitos sobre las capacidades

Mito 3: gap solo funciona en Grid

gap llegó a Grid primero, con el nombre grid-gap, y ese origen dejó huella. Hoy gap, row-gap y column-gap son propiedades del módulo de box alignment y funcionan en Grid, en Flexbox y en layout multicolumna. El soporte en Flexbox está en los cuatro motores desde 2021.

.fila { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }  /* fila, columna */
.rejilla { display: grid; gap: 0.75rem 1.25rem; }

Sigue vivo por inercia el patrón de márgenes negativos en el contenedor con márgenes positivos en los hijos. Bórralo cuando lo encuentres: gap no genera hueco antes del primer elemento ni después del último, no interfiere con el colapso de márgenes y no obliga a compensar nada.

Mito 4: la alineación se hace distinto en cada uno

justify-content, align-items, align-self y las taquigrafías place-* son un único módulo transversal, no dos conjuntos de propiedades con el mismo nombre. Lo que cambia entre Grid y Flexbox no son las propiedades: es a qué eje corresponde cada una y qué subconjunto tiene efecto. En Flexbox justify-* actúa sobre el eje principal, que cambia con flex-direction; en Grid justify-* actúa siempre sobre el eje en línea. Y justify-items con justify-self no tienen efecto sobre ítems de flex, porque en el eje principal el reparto ya lo determina el algoritmo de crecimiento.

/* el mismo resultado visual, el mismo modulo, distinto eje de referencia */
.a { display: flex;  align-items: center; justify-content: center; }
.b { display: grid;  place-items: center; }

Mitos sobre el comportamiento

Mito 5: auto-fit y auto-fill hacen lo mismo

Producen resultados idénticos mientras haya elementos suficientes para llenar todas las pistas, que es el caso en el que se prueban casi siempre. Divergen cuando sobran pistas: auto-fill crea las pistas vacías y las mantiene ocupando espacio; auto-fit crea las mismas pistas y después colapsa a cero las que quedaron vacías, con lo que las pistas con contenido se reparten todo el ancho.

/* con 2 elementos en un contenedor de 1200px y minmax(15rem, 1fr): */
.relleno  { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } /* 2 pistas de 15rem + huecos */
.ajuste   { grid-template-columns: repeat(auto-fit,  minmax(15rem, 1fr)); } /* 2 pistas de ~600px */

Ninguno es mejor. auto-fit es lo que quieres para una galería que debe llenar el ancho; auto-fill es lo que quieres cuando el tamaño de la tarjeta forma parte del diseño y prefieres que quede hueco a la derecha antes que tener dos tarjetas gigantes.

Mito 6: migrar de Flex a Grid obliga a tocar el marcado

Casi nunca. Una rejilla escrita con Flexbox y porcentajes se convierte en Grid cambiando solo el contenedor, porque los dos módulos operan sobre los mismos hijos directos:

/* Antes: tres columnas a base de aritmetica */
.antes { display: flex; flex-wrap: wrap; margin: -0.5rem; }
.antes > * { flex: 0 0 calc(33.333% - 1rem); margin: 0.5rem; }

/* Despues: la misma intencion, declarada */
.despues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

Lo que sí hay que revisar al migrar son tres cosas: los margin de los hijos que existían para simular el hueco, cualquier flex: 1 que dejaba de tener efecto, y las reglas de order, que en Grid se expresan mejor con colocación explícita en líneas.