Flexbox y Grid

Flexbox (display: flex) reparte elementos en una sola dirección y los alinea fácilmente: menús, barras de botones o centrar algo en vertical.

Grid (display: grid) trabaja en dos dimensiones a la vez y es ideal para la estructura general de una página o galerías. Se pueden combinar: una rejilla de tarjetas cuyo contenido se ordena con Flexbox.

Un ejemplo

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) crea una galería que pasa sola de una a varias columnas según el ancho.

Por qué importa

Flexbox y Grid son los dos sistemas modernos de maquetación de CSS. Sustituyen a los trucos antiguos con float y tablas para colocar elementos. Flexbox está pensado para una dimensión: una fila o una columna de elementos que se reparten el espacio, se alinean o se envuelven. Es ideal para barras de navegación, botones en línea o centrar contenido. Grid trabaja en dos dimensiones, filas y columnas a la vez, y sirve para estructurar páginas completas o galerías.

Se activan con display: flex o display: grid en el contenedor, y los hijos se comportan según las propiedades del padre, como justify-content, align-items, gap o grid-template-columns. Con ellos, centrar algo en vertical, que durante años fue un clásico dolor de cabeza, se resuelve en pocas líneas. Son además la base de la mayoría de diseños adaptables.

Confusiones frecuentes

Es habitual preguntarse cuál elegir. Una regla útil: si piensas en una línea de elementos, Flexbox; si piensas en una cuadrícula con filas y columnas, Grid. Y pueden combinarse: un Grid para la página y Flexbox dentro de cada tarjeta. Un error típico de principiante es aplicar las propiedades al elemento equivocado: justify-content y align-items van en el contenedor, no en los hijos. Y en Flexbox, la propiedad que alinea depende del eje principal, que cambia con flex-direction: en columna, justify-content actúa en vertical.

Preguntas frecuentes

¿Cómo centro un elemento en horizontal y vertical?

En el contenedor: display: flex; justify-content: center; align-items: center; (y una altura definida). Con Grid basta display: grid; place-items: center;.

¿Funcionan en todos los navegadores?

Sí, ambos están soportados desde hace años por los navegadores actuales. Solo tendrías que preocuparte si debes dar soporte a navegadores muy antiguos.