Esta es una pregunta que me hacen muy seguido –y hasta diría que estamos ante otro duelo de titanes–: ¿cuál conviene usar, Flexbox o CSS Grid? Y mi respuesta más honesta es: ¡los dos! 😁
El problema es que muchos diseñadores-maquetadores aprenden a usar uno y después se quedan ahí, clavando el visto a las ventajas del otro.
Flexbox y Grid resuelven problemas diferentes. Entender cuándo usar cada uno te va a ahorrar horas de frustración lidiando con el famoso float, position: absolute y otros trucos prehistóricos del CSS.
Veamos las diferencias reales con ejemplos que podés empezar a implementar hoy:
.
Marcando la diferencia
- Flexbox trabaja en una sola dimensión: o en fila o en columna. Es perfecto para alinear elementos en una dirección y distribuir espacio entre ellos. Pensá en un menú de navegación, una galería de íconos o botones alineados.
- CSS Grid trabaja en dos dimensiones: filas y columnas simultáneamente. Es ideal para layouts completos de página, galerías complejas o cualquier diseño que necesite un control preciso sobre ambos ejes.
Si necesitás alinear cosas en línea recta, entonces Flexbox es la que va. Pero si necesitás un sistema de cuadrícula completo, entonces Grid. Así de simple.
No es una cuestión de hacerse fan de «uno u otro». La mayoría de los sitios modernos usan Grid para el layout principal y Flexbox para componentes internos.
.
Cuándo usar Flexbox
Es más conveniente usar Flexbox cuando los elementos necesitan fluir en una dirección y adaptarse al espacio disponible. Por algo es el rey de la alineación y distribución.
Ejemplo 1: Navbar responsiva
See the Pen
Flexbox o CSS Grid | El Blog de Aleare Design by aleare-design (@aleare-design)
on CodePen.
Los elementos del menú se distribuyen horizontalmente y se centran verticalmente sin cálculos manuales. Si el espacio se achica, los elementos se ajustan proporcionalmente.
.
Ejemplo 2: Cards con altura variable
See the Pen
Flexbox o CSS Grid – Ejemplo 2 | El Blog de Aleare Design by aleare-design (@aleare-design)
on CodePen.
Cada tarjeta ocupa 200px de ancho pero puede crecer si hay espacio. El flex-wrap hace que pasen a la siguiente línea cuando ya no caben en el contenedor. Dentro de cada card, flex-direction: column te permite controlar cómo se apilan los elementos internos.
.
Caso 3: Centrado perfecto
See the Pen
Untitled by aleare-design (@aleare-design)
on CodePen.
Tres líneas de código para centrar contenido horizontal y verticalmente. Antes de Flexbox, esto requería trucos raros con transform y position.
💡 Tip: hacete amigo de gap en Flexbox, y olvidate de andar calculando márgenes manualmente entre elementos.
.
Cuándo usar CSS Grid
Usá Grid cuando necesitás control total sobre filas y columnas, o cuando tu diseño tiene áreas específicas que deben mantener relaciones entre sí.
Caso 1: Layout de página completa
See the Pen
Flexbox o CSS Grid – Ejemplo 4 | El Blog de Aleare Design by aleare-design (@aleare-design)
on CodePen.
Esto define todo el layout en un solo lugar. El contenido principal (main) ocupa el espacio disponible, las sidebars tienen ancho fijo, y todo se organiza sin esfuerzo, sin floats ni cálculos complejos.
.
Caso 2: Galería de imágenes responsive
See the Pen
Flexbox o CSS Grid – Ejemplo 5 | El Blog de Aleare Design by aleare-design (@aleare-design)
on CodePen.
Esta línea es magia pura: auto-fit y minmax() hacen que las imágenes se reorganicen automáticamente según el ancho disponible. Cada imagen ocupa mínimo 250px pero crece hasta llenar el espacio. Cero media queries. Menos es más.
.
Caso 3: Dashboard con áreas específicas
See the Pen
Flexbox o CSS Grid – Ejemplo 6 | El Blog de Aleare Design by aleare-design (@aleare-design)
on CodePen.
Sistema de 12 columnas como Bootstrap, pero sin el peso de un framework. Los widgets ocupan el espacio que necesitan y se reorganizan fácilmente cambiando el span.
💡 Tip: Usar grid-template-areas con nombres descriptivos hace tu código increíblemente legible. Cualquiera puede entender el layout al toque sin andar andivinando.
.
Cuando tengas dudas
Usá este cuadrito o hack rápido para resolver:
.
La combinación ganadora
El poder real está en combinarlos. Un ejemplo típico de mi flujo de trabajo sería algo así:
- Grid para el layout general (header, sidebar, main, footer)
- Flexbox para el contenido del header (logo, menú, botones)
- Grid para el contenido principal (artículos en cuadrícula)
- Flexbox dentro de cada artículo (imagen, título, texto, botón)
Cada herramienta hace lo que mejor sabe hacer, sin forzarlas a resolver problemas para los que no fueron diseñadas.
.
Compatibilidad y soporte
Si bien ambas tecnologías tienen soporte total en todos los navegadores modernos desde hace años, algunos proyecto todavía usan IE 11… Aunque parezca mentira, que los hay, los hay.
Para estos casos extremos, @supports permite detectar si el navegador entiende Grid y dar un fallback:
.layout {
display: flex; /* fallback */
}
@supports (display: grid) {
.layout {
display: grid;
}
}
De todas formas, esto como que ya no es necesario hoy en día. Pero viene bien citarlo.
Así que ya sabés, si querés ser un diseñador web más eficiente y estar al día con las nuevas tendencias, dejá de pelearte con float y clear:both, olvidate de intentar hackear layouts y calcular anchos con porcentajes. Usá las herramientas que CSS te da y enfocate a full en crear experiencias.
Cómo hacer un flipcard con HTML y CSS
Como de costumbre, si te gustaría hacer un comentario o una corrección (nadie es perfecto), escribilo en la caja de comentarios. ¡Todo es bienvenido!
