Un solo módulo de alineación para todos los layouts

Durante años, alinear en CSS significaba aprenderse un repertorio de trucos sin relación entre sí: text-align para el texto, vertical-align para las celdas, márgenes automáticos para los bloques, y un position: absolute con desplazamiento negativo para lo demás. El módulo de Box Alignment recogió todo eso en un sistema único de seis propiedades que significan lo mismo en cualquier modo de layout, y entender ese sistema como sistema ahorra memorizar cinco tablas.

Dos familias, no seis propiedades sueltas

El módulo define dos operaciones distintas y le da a cada una un par de propiedades.

La distribución de contenido (justify-content y align-content) coloca el conjunto de los sujetos dentro del contenedor y decide qué se hace con el espacio sobrante: pegarlo a un lado, centrarlo o repartirlo entre los sujetos. Es una propiedad del contenedor porque habla de todos a la vez.

La autoalineación (justify-self y align-self, con sus valores por defecto justify-items y align-items declarados en el contenedor) coloca cada sujeto dentro del área que le ha tocado. Es una propiedad de cada elemento porque cada uno puede querer una cosa distinta.

La distinción no es formal, es operativa: si el espacio sobrante está entre los elementos, es distribución de contenido; si está alrededor de uno de ellos dentro de su hueco, es autoalineación. En una rejilla las dos existen a la vez y son independientes: puedes centrar el bloque de pistas dentro del contenedor con justify-content y a la vez alinear cada elemento a la izquierda de su celda con justify-items.

.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 10rem);   /* pistas fijas: sobra espacio */
  gap: 1rem;
  justify-content: center;   /* el bloque de 3 pistas, centrado en el contenedor */
  justify-items: start;      /* cada elemento, pegado al inicio de SU celda */
}

Contenedor de alineación y sujeto

La especificación habla de un contenedor de alineación (el rectángulo dentro del cual se coloca algo) y de un sujeto de alineación (lo que se coloca). Lo que cambia entre modos de layout no son las propiedades: es a qué corresponde cada uno de esos dos papeles.

Esta tabla explica la mayoría de las sorpresas. Por ejemplo, que justify-content en Grid mueva las pistas y no los elementos: si tus pistas son 1fr no sobra espacio, las pistas ya ocupan todo, y justify-content no tiene ningún efecto visible. La gente concluye que “no funciona” cuando lo que ocurre es que el sujeto que iba a mover ya llena el contenedor.

Qué tiene efecto en cada modo

No todas las propiedades se aplican en todos los layouts, y las exclusiones tienen motivo.

Las dos casillas de “ignorada” en Flexbox son las que más confunden y tienen una explicación limpia: en el eje principal de un contenedor flex, el tamaño de cada ítem ya lo determina el algoritmo de crecimiento y encogimiento. No existe un “hueco asignado” dentro del cual alinear el ítem, porque el ítem es el hueco. Por eso el eje principal solo admite distribución de contenido y por eso el equivalente a justify-self en Flexbox son los márgenes automáticos, que sí participan en el reparto de espacio libre.

En layout de bloque, la alineación en el eje en línea se sigue haciendo con margin-inline: auto, que lleva funcionando desde siempre y no necesita sustituto.

Por qué gap vive aquí

gap, row-gap y column-gap son propiedades de este módulo, no de Grid, aunque llegaran primero a Grid con el nombre grid-gap. La razón es conceptual: el hueco es espacio reservado antes de repartir el sobrante, y por tanto forma parte del mismo cálculo que la distribución de contenido. Por eso space-between reparte lo que queda después de aplicar los gap, y por eso los dos mecanismos se combinan sin pelearse.

Que sea un módulo transversal es lo que permitió que gap llegara a Flexbox en 2021 y a multicolumna sin reinventar nada: la definición ya estaba escrita para cualquier contenedor.