Cómo usar Grid y Flexbox en CSS
Por Ezequiel Orazi, desarrollador full-stack
Actualizado en junio de 2026. Sumé las técnicas de CSS que hoy ya tienen soporte total en navegadores y que cambiaron la forma de maquetar:gaptambién en Flexbox, las container queries,subgrid,aspect-ratioy grillas responsivas conauto-fityminmax()sin necesidad de media queries. Los fundamentos de Grid y Flexbox que verás abajo siguen siendo la base.
Introducción
En el diseño web moderno, construir layouts flexibles y responsivos es esencial. Dos de las herramientas más poderosas en CSS para este propósito son CSS Grid y Flexbox. Cada uno tiene sus fortalezas y casos de uso, y en este artículo exploraremos cómo funcionan, en qué se diferencian, y cuándo deberías utilizar uno sobre el otro. Al final, tendrás una mejor comprensión de cómo emplear ambos para crear interfaces web adaptables y bien estructuradas.
¿Qué es Flexbox?
Flexbox, abreviatura de "Flexible Box Layout", es un sistema de layout de una dimensión que permite alinear y distribuir elementos en un contenedor, ya sea en dirección de fila o columna. Flexbox es ideal para construir layouts simples y para alinear elementos de manera dinámica.
Ejemplo de Flexbox
.contenedor {
display: flex;
justify-content: space-around;
align-items: center;
}
.item {
flex: 1;
padding: 10px;
background-color: #ddd;
}
¿Qué es CSS Grid?
CSS Grid es un sistema de layout bidimensional que permite crear diseños de cuadrícula en filas y columnas. A diferencia de Flexbox, Grid es especialmente útil para layouts complejos y estructurados donde se necesita una mayor precisión en la colocación de los elementos.
Ejemplo de CSS Grid
.grid-contenedor {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
}
Comparación: Flexbox vs. Grid
Tanto Flexbox como Grid son útiles, pero se destacan en diferentes aspectos. Aquí hay una comparación rápida:
- Flexbox: Mejor para layouts lineales de una dimensión, ya que facilita la alineación y el espaciado entre elementos en una dirección (horizontal o vertical).
- Grid: Ideal para layouts bidimensionales complejos, ya que permite controlar filas y columnas de manera independiente.
Casos de Uso para Flexbox
Algunos escenarios donde Flexbox es especialmente útil:
- Centraje de elementos en un contenedor.
- Creación de menús de navegación horizontales.
- Alineación de elementos en una sola fila o columna.
Casos de Uso para Grid
Algunos escenarios donde Grid es ideal:
- Diseño de layouts de página completos.
- Creación de galerías de imágenes en cuadrícula.
- Distribución de elementos en filas y columnas complejas.
Ejemplo de Layout Combinado
En muchos casos, combinar Flexbox y Grid puede ser la solución más efectiva. Aquí un ejemplo de cómo puedes utilizar ambos para crear un layout flexible:
.pagina {
display: grid;
grid-template-areas:
"header header"
"menu principal"
"footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr;
}
.header {
grid-area: header;
}
.menu {
grid-area: menu;
display: flex;
flex-direction: column;
}
.principal {
grid-area: principal;
}
.footer {
grid-area: footer;
}
CSS moderno que cambia el juego (2026)
Desde que se publicó esta guía, el CSS evolucionó mucho y varias técnicas que antes requerían trucos o JavaScript hoy son nativas y con soporte total:
- Grillas responsivas sin media queries: con
repeat(auto-fit, minmax(220px, 1fr))la grilla acomoda sola la cantidad de columnas según el espacio disponible. - Container queries: permiten que un componente se adapte al ancho de su contenedor (no solo al de la pantalla), lo que hace que los componentes sean verdaderamente reutilizables.
- Subgrid: deja que un elemento hijo herede las líneas de la grilla del padre, ideal para alinear tarjetas con distinto contenido.
- aspect-ratio: reserva la proporción de imágenes y videos sin hacks de padding, evitando el "layout shift".
/* Galería que se adapta sola, sin media queries */
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
/* Un componente que responde al ancho de SU contenedor */
.tarjeta-contenedor { container-type: inline-size; }
@container (min-width: 400px) {
.tarjeta { display: flex; gap: 1rem; }
}
Conclusión
Grid y Flexbox son herramientas poderosas y complementarias en CSS. Utiliza Flexbox para layouts lineales y de una sola dimensión y CSS Grid para estructuras de cuadrícula más complejas. A medida que te familiarices con ambos, descubrirás que muchas veces puedes combinarlos para lograr layouts más versátiles y adaptables.
Citas y Fuentes
- MDN Web Docs sobre Flexbox: "Flexbox es un modelo de layout diseñado para interfaces de usuario complejas y responsivas".
- MDN Web Docs sobre Grid: "CSS Grid Layout es el primer método de layout de CSS diseñado explícitamente para construir interfaces de usuario complejas".
Seguí aprendiendo
¿Querés un sitio rápido y bien maquetado para tu negocio? Escribime y lo vemos.