Cómo se dimensionan las pistas

Grid resuelve el tamaño de sus pistas con un algoritmo de cinco fases que trabaja sobre dos números por pista: una base que solo crece y un límite que la frena. Es más complejo que el bucle de flexbox porque una pista es compartida por todas las filas y su tamaño tiene que ser un compromiso entre contenidos que ni se conocen. Conocer las fases explica por qué el reparto no siempre coincide con la intuición y por qué el orden de las declaraciones no influye pero el de las fases sí.

Base y límite de crecimiento

Cada pista arranca con dos valores derivados de su función de dimensionado. La base es su tamaño actual y solo crece durante el algoritmo. El límite de crecimiento es el techo hasta el que puede crecer.

Para una pista minmax(min, max), la base sale de min y el límite de max. Un min fijo da una base con ese valor; un min intrínseco da una base de cero que las fases posteriores irán subiendo. Un max fijo da un límite con ese valor; un max intrínseco o flexible da un límite infinito de partida.

La fila de 1fr recuerda lo que ya viste: como es minmax(auto, 1fr), su base no es cero al final del proceso, sino el mínimo del contenido. De ahí que dos pistas 1fr puedan salir desiguales.

Las cinco fases

Fase 1: inicializar. Se asigna a cada pista su base y su límite según la tabla anterior, sin mirar todavía el contenido.

Fase 2: resolver tamaños intrínsecos. Aquí entra el contenido. Se procesan primero los elementos que ocupan una sola pista, subiendo la base de esa pista hasta acomodar su contribución. Después, los que ocupan varias pistas, en orden creciente de número de pistas ocupadas, repartiendo su contribución entre las pistas que abarcan. Y por último los que ocupan alguna pista flexible.

Ese orden es importante y explica un comportamiento que desconcierta: un elemento que abarca dos columnas no ensancha ninguna de las dos si entre las dos ya cabe. Solo cuando no cabe se reparte el exceso, y se reparte entre las pistas que puedan crecer.

Fase 3: maximizar pistas. Si sobra espacio, se reparte por igual entre las bases de todas las pistas hasta que cada una alcance su límite de crecimiento. Las que llegan a su límite dejan de recibir y su parte se redistribuye entre las demás.

Fase 4: expandir las pistas flexibles. Se calcula el tamaño de un fr de forma que las pistas flexibles llenen el espacio restante, y se les asigna. Si el resultado fuese menor que su base, se conserva la base: una pista 1fr nunca es más pequeña que su contenido mínimo.

Fase 5: estirar las pistas auto. Si queda espacio libre y justify-content o align-content valen normal o stretch —que son los valores por defecto— ese espacio se reparte a partes iguales entre las pistas cuyo máximo sea auto.

Esa quinta fase es la que explica por qué una pista auto se estira y una max-content no, aunque en el resto del algoritmo se comporten casi igual.

Los gaps

gap es la abreviatura de row-gap y column-gap. En grid define un espacio entre pistas adyacentes que se comporta, a efectos del algoritmo, como una pista fija más: se resta del espacio disponible antes de repartir nada.

.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;          /* filas y columnas */
}
.otra {
  gap: 2rem 1rem;       /* row-gap 2rem, column-gap 1rem */
}

Tres detalles que conviene tener claros.

Un gap en porcentaje se resuelve contra el tamaño de la caja de contenido del contenedor en el eje correspondiente: column-gap: 5% mide contra el ancho, row-gap: 5% contra el alto. Si el alto no es determinable, se resuelve contra cero, con lo que el gap desaparece. Es una fuente de sorpresas y una buena razón para usar rem en los gaps.

No hay gap antes de la primera pista ni después de la última. gap es espacio entre, y esa es exactamente la razón de que exista: era lo único que los márgenes no podían expresar sin compensaciones.

Y los gaps no se colapsan nunca, ni entre sí ni con márgenes. Un elemento con margin-inline-end: 1rem en una rejilla con gap: 1rem deja 2rem de separación.

Las abreviaturas y lo que resetean

grid-template es la abreviatura de grid-template-rows, grid-template-columns y grid-template-areas. Su sintaxis con barra es directa:

/* filas / columnas */
.panel { grid-template: auto 1fr auto / 16rem 1fr; }

Como toda abreviatura, resetea lo que no mencionas: si tenías grid-template-areas definido y escribes un grid-template sin áreas, las áreas desaparecen.

grid es una abreviatura mayor y bastante más peligrosa. Además de las tres anteriores, resetea grid-auto-rows, grid-auto-columns y grid-auto-flow a sus valores iniciales.

/* Esto funciona */
.a { grid-auto-rows: 10rem; grid-template-columns: repeat(3, 1fr); }

/* Y esto borra el grid-auto-rows sin decir nada */
.b { grid-auto-rows: 10rem; grid: none / repeat(3, 1fr); }

La recomendación práctica es sencilla: usa grid-template para la definición explícita y las propiedades individuales para las implícitas. La abreviatura grid tiene una sintaxis compacta para definir a la vez las pistas explícitas y el flujo automático, pero es tan densa que casi nadie la lee bien en una revisión de código.

.pagina {
  display: grid;
  grid-template:
    "cabecera cabecera" auto
    "lateral  principal" 1fr
    "pie      pie" auto
    / 16rem 1fr;
}