Maquetación CSS: cuándo usar flexbox y cuándo usar grid

Qué es

MDN describe flexbox como un modelo de maquetación unidimensional: un contenedor flexible dispone sus elementos a lo largo de un eje principal (fila o columna), distribuye el espacio libre con flex-grow, flex-shrink y flex-basis, y puede ajustar el texto (wrap) en varias líneas con flex-wrap, cada línea maquetada por su cuenta. Grid es bidimensional: grid-template-columns y grid-template-rows definen pistas (tracks) (con la unidad fr, repeat() y minmax()), los elementos se colocan en celdas o áreas con nombre, y el contenido que no cabe en la cuadrícula explícita crea pistas implícitas. Ambos comparten gap y las propiedades de alineación de caja como align-items y justify-content.

Por qué importa

La mayoría de los defectos de maquetación, como texto que desborda, columnas que nunca se alinean o contenido que salta en cierto ancho de viewport, provienen de elegir el modelo equivocado. Las líneas flexibles que se ajustan (wrap) no alinean elementos entre líneas, así que las cuadrículas de tarjetas construidas con flexbox se desalinean. Grid con pistas en píxeles fijos no se adapta al contenido ni a pantallas estrechas.

Cómo aplicarlo

• El contenido decide el tamaño (barras de navegación, filas de botones, listas de etiquetas, centrado vertical de un elemento): flexbox.
• La estructura decide el tamaño (armazón de página con encabezado, barra lateral y contenido principal; formularios con etiquetas alineadas; cuadrículas de tarjetas donde las filas deben alinearse): grid.
• Cuadrícula de tarjetas responsiva sin media queries: grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)).
• Dejar que los elementos flexibles se encojan: un elemento se encoge solo hasta su tamaño de contenido mínimo (min-content), así que las cadenas largas sin puntos de corte fuerzan el desbordamiento; fijar min-width: 0 (u overflow-wrap: anywhere) en esos elementos.
• Usar gap para el espaciado entre elementos en lugar de márgenes en los hijos, que se filtran hacia los bordes.
• Anidar libremente: grid para la página, flexbox dentro de los componentes; comprobar el resultado en un ancho de teléfono estrecho y en un ancho amplio.

Trampas

justify-content actúa solo sobre el eje principal; centrar en ambas direcciones también necesita align-items, o place-items: center en una cuadrícula. Una altura en porcentaje en un hijo flexible requiere una altura definida en el padre. order y row-reverse cambian el orden visual pero no el orden del DOM que sigue el foco de teclado y los lectores de pantalla, lo que puede volver confusa la navegación de una página.