Alineación de contenedor

Propiedades que controlan cómo se alinean los items dentro de cada celda del grid.

justify-items: alinea horizontalmente los items dentro de cada celda.
align-items: alinea verticalmente los items dentro de cada celda.
place-items: atajo para combinar justify-items y align-items.
Posibles valores:
stretch: Estira el item para llenar toda la celda (predeterminado).
start: Alinea al inicio de la celda (izquierda para horizontal, arriba para vertical).
center: Centra el item dentro de la celda.
end: Alinea al final de la celda (derecha para horizontal, abajo para vertical).

Ejemplo

En este ejemplo dinámico, podemos comprobar las diferentes alineaciones de las celdas con las distintas propiedades de justify-items y align-items.

Selecciona justify-items:

stretchstartcenterend

Selecciona align-items:

stretchstartcenterend

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child-big">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child-big">5</div>
  <div class="child">6</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child-big">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child-big">5</div>
  <div class="child">6</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto auto auto;
  justify-items: stretch;
  padding: 0.5rem;
}

.child-big {
  padding: 2rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto auto auto;
  justify-items: stretch;
  padding: 0.5rem;
}

.child-big {
  padding: 2rem;
}

.child {
  padding: 1rem;
}

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