justify-self

justify-self controla cómo se posiciona un ítem grid dentro de su propia celda en el eje en línea — el eje horizontal en sistemas de escritura occidental. Por defecto, un ítem grid se estira para llenar toda la celda que le corresponde (stretch). Con justify-self podés cambiar ese comportamiento ítem a ítem: center lo encoge a su contenido y lo centra; start lo pega al borde izquierdo de la celda; end al borde derecho.

La clave conceptual es que justify-self opera dentro de la celda, no sobre el grid en su conjunto. La celda ya fue determinada — por el auto-placement o por grid-column/grid-area del ítem — y justify-self decide cómo el ítem ocupa ese espacio. Si el ítem llena la celda con stretch, no hay espacio para posicionarlo; es al cambiar a otro valor cuando el ítem se “encoge” a su tamaño natural y la alineación tiene efecto visible.

justify-self es exclusiva de Grid — Flexbox no la tiene. En Flexbox, la alineación en el eje principal la controla el contenedor con justify-content (que distribuye todos los ítems a la vez), y no existe un mecanismo para que un ítem individual se coloque diferente al resto en ese eje. Grid sí lo permite porque cada ítem vive en su celda propia con dimensiones definidas. El par complementario de justify-self en el eje de bloque (vertical) es align-self, que existe tanto en Flexbox como en Grid. El shorthand que combina ambas es place-self.

Sintaxis

/* En el ítem (no en el contenedor) */
.item {
  justify-self: stretch;  /* llena toda la celda en el eje en línea (por defecto) */
  justify-self: start;    /* alineado al inicio de la celda */
  justify-self: end;      /* alineado al final de la celda */
  justify-self: center;   /* centrado dentro de la celda */
}

/* El contenedor puede establecer el valor por defecto para todos los ítems */
.grid {
  justify-items: center;  /* equivale a justify-self: center en cada ítem */
}

/* place-self: shorthand de align-self y justify-self */
.item {
  place-self: center;          /* ambos ejes centrados */
  place-self: start end;       /* align-self: start; justify-self: end */
}

Valores y sub-bloques

stretch (por defecto)

El ítem se estira para ocupar todo el ancho de su celda en el eje en línea. Es el comportamiento que hace que los ítems de un grid llenen sus celdas automáticamente. El estiramiento respeta los límites de min-width y max-width del ítem.

.item { justify-self: stretch; }
/* El ítem ocupa el 100% del ancho de su celda */

start

El ítem se alinea al inicio del eje en línea de su celda — el borde izquierdo en escritura occidental. El ítem adopta su tamaño natural (no se estira); el espacio sobrante queda a la derecha.

end

El ítem se alinea al final del eje en línea de su celda — el borde derecho en escritura occidental. El espacio sobrante queda a la izquierda.

center

El ítem se centra horizontalmente dentro de su celda. El espacio sobrante se distribuye en partes iguales a izquierda y derecha.

place-self — el shorthand de ambos ejes

place-self es el shorthand que combina align-self (eje de bloque) y justify-self (eje en línea) en una sola declaración:

/* place-self: align-self justify-self */
.item { place-self: center; }        /* ambos ejes: center */
.item { place-self: start end; }     /* align-self: start; justify-self: end */
.item { place-self: center start; }  /* centrado verticalmente, al inicio horizontalmente */

Con un solo valor, place-self lo aplica a ambas propiedades.

Cuándo usarlo

justify-self aplica cuando un ítem específico necesita una alineación horizontal diferente al resto de los ítems del grid. Si todos los ítems necesitan el mismo valor, usá justify-items en el contenedor:

Notas, gotchas e interacción

• justify-self no existe en Flexbox. En flex, la alineación en el eje principal es responsabilidad exclusiva del contenedor (justify-content). Si llegás de Flexbox, es un cambio conceptual importante: en Grid, cada ítem puede posicionarse de forma independiente en el eje en línea.
• El efecto solo es visible cuando el ítem es más pequeño que su celda. Con stretch (el default), el ítem llena la celda y no hay espacio para posicionarlo. Al cambiar a start/end/center, el ítem se “encoge” a su contenido — si tiene width fija que ya llena la celda, el valor de justify-self no produce cambio visual.
• justify-self opera sobre la celda del ítem, no sobre el contenedor. Si el contenedor tiene justify-content: center (la grilla completa centrada), justify-self sigue operando dentro de la celda que le corresponde al ítem — los dos niveles son independientes.
• justify-items en el contenedor establece el valor por defecto. justify-self en el ítem sobreescribe ese valor para ese ítem específico. La jerarquía es: justify-self del ítem > justify-items del contenedor.
• Interacción con align-self: align-self hace lo mismo en el eje de bloque (vertical). Juntos determinan la posición completa del ítem dentro de su celda. place-self los combina en un shorthand.

Vigente / legacy

justify-self es parte del estándar CSS Box Alignment Level 3 y es baseline widely available. No existe alternativa legacy equivalente para alinear un ítem individual horizontalmente dentro de su celda: los layouts previos a Grid no tenían el concepto de celda asignada a un ítem. No se necesitan prefijos de vendor.