Grid avanzado

En el curso de Fundamentals aprendiste las bases de Grid: filas, columnas y grid-column/grid-row. Aquí profundizamos en las herramientas que hacen Grid realmente potente para layouts complejos.

Áreas nombradas con grid-template-areas

En lugar de posicionar con números de línea, puedes nombrar las zonas del layout y asignar elementos a ellas:

.layout {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer  { grid-area: footer; }

El valor de grid-template-areas es un mapa visual del layout. Cada fila es una cadena de texto, cada palabra es una celda. Las celdas contiguas con el mismo nombre forman un área rectangular.

Para dejar una celda vacía, usa .:

grid-template-areas:
  "header  header  ."
  "sidebar content content"
  ".       footer  footer";

Responsive con áreas nombradas

La combinación de áreas nombradas con media queries produce un responsive muy legible:

.layout {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .layout {
    grid-template-areas:
      "header  header"
      "sidebar content"
      "footer  footer";
    grid-template-columns: 260px 1fr;
  }
}

El HTML no cambia, solo el CSS redibuja el layout completo.

minmax() — rangos de tamaño

minmax(mínimo, máximo) define un rango para el tamaño de una pista (fila o columna):

.grid {
  grid-template-columns: 200px minmax(300px, 1fr) 200px;
  /* columna central: mínimo 300px, ocupa el resto del espacio disponible */
}

/* Fila con altura mínima pero que crece con el contenido */
grid-template-rows: minmax(80px, auto);

La unidad fr (fracción) representa una parte del espacio disponible después de descontar los tamaños fijos:

/* 3 columnas: la primera fija, las otras dos se reparten el espacio */
grid-template-columns: 250px 1fr 2fr;
/* segunda columna: 1 parte | tercera columna: 2 partes */

auto-fill y auto-fit — columnas automáticas

El patrón más práctico de Grid para layouts tipo galería o cards:

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Esto crea tantas columnas como quepan sin superar 280px de mínimo, y hace que cada columna ocupe 1fr del espacio restante. El resultado: un grid responsive sin una sola media query.

auto-fill vs auto-fit:

/* auto-fill: crea tantas columnas como quepan, aunque estén vacías */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: las columnas vacías se colapsan, las ocupadas se expanden */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

La diferencia es visible cuando tienes pocos elementos: auto-fit los expande para llenar el espacio, auto-fill los mantiene en su ancho mínimo y deja espacio vacío a la derecha.

Generalmente auto-fit es lo que quieres para cards.

grid-auto con flujo implícito

Cuando los elementos se añaden sin posicionamiento explícito, Grid los coloca en el siguiente hueco disponible. Puedes controlar el tamaño de esas filas/columnas implícitas:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(120px, auto);  /* filas implícitas de mínimo 120px */
  grid-auto-flow: row;                  /* por defecto */
}

grid-auto-flow: dense hace que Grid rellene huecos con elementos más pequeños:

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 100px;
  grid-auto-flow: dense;  /* rellena huecos, puede cambiar el orden visual */
}

/* Elementos grandes que ocupan más espacio */
.item--wide { grid-column: span 2; }
.item--tall { grid-row: span 2; }

Alineación avanzada

Grid tiene dos ejes de alineación: el eje inline (horizontal) y el eje block (vertical):

.grid {
  /* Alineación de todos los items dentro de sus celdas */
  align-items: center;       /* eje block (vertical) */
  justify-items: start;      /* eje inline (horizontal) */

  /* Alineación del grid completo dentro del contenedor */
  align-content: space-between;    /* filas */
  justify-content: space-between;  /* columnas */

  /* Shorthand: place-items = align-items + justify-items */
  place-items: center start;

  /* place-content = align-content + justify-content */
  place-content: center;
}

/* Alineación individual de un item */
.item-especial {
  align-self: end;
  justify-self: stretch;
  place-self: end stretch;
}

Subgrid — alinear hijos con el grid del padre

subgrid permite que un elemento hijo participe en las líneas del grid de su contenedor, en lugar de crear un grid independiente:

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

/* La card hereda las columnas del grid padre */
.card {
  display: grid;
  grid-column: span 1;
  grid-template-rows: auto 1fr auto;  /* imagen | contenido | footer */
}

/* Con subgrid en filas: todas las cards se alinean por fila aunque 
   tengan contenido de distinta altura */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto); /* imagen | contenido | footer */
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* hereda las filas del padre */
}

Con subgrid, todas las cards comparten la misma cuadrícula de filas: los títulos se alinean con los títulos, los footers con los footers, aunque el texto sea de distinta longitud.

En la última lección del curso tratamos la arquitectura CSS: cómo organizar y estructurar los estilos para que escalen a medida que el proyecto crece.