Alineación de item

Propiedades para alinear individualmente un item dentro de su propia celda.

justify-self: alinea horizontalmente un item en su celda.
align-self: alinea verticalmente un item en su celda.
place-self: atajo para combinar justify-self y align-self.
Posibles valores:
stretch: El ítem se estira para ocupar toda la celda en ese eje (predeterminado).
start: Alinea al inicio del eje (izquierda en horizontal, arriba en vertical).
center: Centra en el eje correspondiente.
end: Alinea al final del eje (derecha en horizontal, abajo en vertical).

Ejemplo

En este ejemplo dinámico, podemos comprobar las diferentes alineaciones de un item dentro de su propia celda mediante justify-self y align-self.

Selecciona justify-self:

stretchstartcenterend

Selecciona align-self:

stretchstartcenterend

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child item">2</div>
  <div class="child">3</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child item">2</div>
  <div class="child">3</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto auto auto;
  grid-template-rows: 6rem;
  height: 6rem;
  padding: 0.5rem;
}

.item {
  align-self: stretch;
  background: #d9d2f5;
  justify-self: stretch;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto auto auto;
  grid-template-rows: 6rem;
  height: 6rem;
  padding: 0.5rem;
}

.item {
  align-self: stretch;
  background: #d9d2f5;
  justify-self: stretch;
}

.child {
  padding: 1rem;
}

Edita el código o usa los selectores: el resultado cambia al instante.