Hace unos años, me senté a construir un dashboard. Nada del otro mundo: solo una barra lateral fija, un área de contenido principal y un pie de página.

Hace unos años, me senté a construir un dashboard. Nada sofisticado: solo una barra lateral fija, un área de contenido principal y un pie de página. Flexbox parecía la opción obvia y, al principio, funcionaba. Luego, añadí una fila de tarjetas en la sección principal. Todo el diseño se desmoronó. Pasé las siguientes tres horas luchando con las proporciones de flex-grow y anidando anchos porcentuales, viendo cómo los contenedores se negaban a alinearse sin importar cuánto padding restara. La página se sentía como una torre a punto de caer.

Esa experiencia dolorosa me enseñó la cosa más importante sobre el diseño moderno con CSS: Flexbox y Grid no son rivales. Son herramientas para trabajos diferentes, y la mayoría de los diseños fallidos provienen de elegir la incorrecta.

La diferencia es dimensional

Imagina que Flexbox es un pasillo. Los elementos fluyen en una sola dirección, ya sea como una fila o como una columna. Está diseñado para la distribución unidimensional. El navegador observa el contenido y luego decide cómo estirarlo, encogerlo o alinearlo a lo largo de ese único eje. Esto hace que Flexbox sea perfecto para situaciones donde el contenido dicta el diseño. Una barra de navegación, una pila de campos de formulario o un conjunto de etiquetas que necesitan un espaciado uniforme se asientan de forma natural en un contenedor flex porque comparten una única línea de lógica.

Grid, por otro lado, es un plano de planta. Es estrictamente bidimensional, ya que maneja filas y columnas al mismo tiempo. Primero defines la estructura y luego colocas los elementos dentro de ella. Esto hace que Grid sea ideal para la arquitectura general de la página, en cualquier lugar donde necesites controlar el posicionamiento vertical y horizontal de forma conjunta. Cuando intentas forzar un diseño bidimensional complejo mediante contenedores Flexbox anidados, terminas con un marcado profundo, envoltorios frágiles y cálculos quebradizos que se rompen en el momento en que añades un elemento extra.

Flexbox sigue teniendo su lugar

No te apresures a reemplazar cada contenedor flex con Grid. Dentro de los componentes individuales, Flexbox suele ser más limpio y directo. Si tienes el pie de página de una tarjeta con dos botones y quieres uno alineado a la izquierda y otro a la derecha, justify-content: space-between hace exactamente lo que buscas. Si necesitas centrar verticalmente un icono dentro de un botón de altura desconocida, align-items: center es el camino más sencillo. El contenido variable —como una fila de insignias de usuario con diferentes longitudes de nombre— encaja cómodamente dentro de Flexbox porque está orientado al contenido. El contenedor se adapta a lo que contiene.

Grid está orientado al contenedor. Le dices al navegador cuántas pistas existen y qué tamaño deben tener, y luego colocas los elementos en esas celdas. Si tu diseño es realmente solo una única línea de elementos hermanos compartiendo espacio, Grid añade una complejidad innecesaria.

El diseño de la página pertenece a Grid

Aquí es donde Grid toma el control. ¿Recuerdas mi pesadilla con el dashboard? Así es como la estructura debería haber lucido desde el principio:

.page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
}

.header { grid-row: 1; grid-column: 1 / -1; }
.sidebar { grid-row: 2; grid-column: 1; }
.main { grid-row: 2; grid-column: 2; }
.footer { grid-row: 3; grid-column: 1 / -1; }

Observa lo que está sucediendo. El contenedor .page establece tres filas y dos columnas. La primera fila se dimensiona según lo que contenga el encabezado gracias a auto. La fila central reclama todo el espacio sobrante disponible con 1fr. El pie de página se ubica en la última fila, dimensionado según su propio contenido. Mientras tanto, la barra lateral se bloquea en 200 píxeles de ancho y el área principal llena el resto.

La lógica de posicionamiento es el verdadero alivio. El encabezado se extiende desde la línea de columna 1 hasta la línea -1, lo que significa que se estira a través de ambas columnas sin importar cuántas columnas añadas más tarde. La barra lateral y el contenido principal comparten la fila 2 pero ocupan columnas separadas. El pie de página vuelve al ancho completo en la fila 3. No necesitas cálculos porcentuales en los elementos hijos. No necesitas envoltorios anidados luchando por la altura. Cambia el ancho de la barra lateral en un solo lugar y el área principal se ajustará automáticamente. Todo el diseño respira como un sistema único.

Legibilidad con grid-template-areas

Para obtener aún más claridad, puedes nombrar tus secciones. En lugar de gestionar números de línea, escribes un mapa visual:

.page {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }

Ahora tu hoja de estilos se lee como un wireframe. Si alguna vez quieres que la barra lateral aparezca a la derecha para un breakpoint diferente, simplemente intercambias dos palabras en la cadena de la plantilla. Ese tipo de legibilidad estructural es imposible de lograr dentro de una torre de contenedores flex anidados.

Dos lecciones difíciles

Grid no es magia. Hay dos errores que arruinarán tu diseño rápidamente.

El primero es el uso descuidado de las unidades. Si defines grid-template-columns: 1fr 1fr 1fr pero tu diseño solo necesita dos columnas de contenido, esa tercera pista seguirá existiendo. O bien quedará vacía y creará un hueco que no esperabas, o forzará a tu contenido real a comprimirse de maneras que rompan tu diseño. Sé intencional. Cuando quieras decir dos columnas, escribe repeat(2, 1fr).