← Volver a todas las Posts

CSS Grid vs Flexbox

css layout frontend

El dilema del layout

Durante años, los desarrolladores web sufrieron con el layout. Los floats, las tablas y los hacks con inline-block eran la norma. Hoy contamos con dos herramientas increíbles: CSS Grid y Flexbox.

Flexbox: una dimensión

Flexbox está diseñado para distribuir elementos en una sola dimensión: una fila o una columna.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

CSS Grid: dos dimensiones

Grid está diseñado para layouts bidimensionales: filas y columnas a la vez.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

La regla general

  • Flexbox → Prioriza el contenido, alineación en un solo eje
  • Grid → Prioriza el layout, control en dos ejes

Cuándo combinar ambos

Puedes usar Grid para el layout general de la página y Flexbox para los componentes individuales dentro de las celdas del grid.