Alineación en ambos ejes dentro de celdas de cuadrícula CSS

Se puede establecer simultáneamente la alineación de elementos dentro de las celdas de la cuadrícula tanto en el eje horizontal como en el vertical. Para este propósito, podemos combinar dos propiedades justify-items y align-items, que se establecen en el elemento padre.

En el centro de los ejes

Alineemos nuestros elementos en el centro de los ejes horizontal y vertical:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Ahora veamos nuestra cuadrícula en el depurador:

Al inicio del horizontal y al final del vertical

Coloquemos nuestros elementos en las celdas al inicio del eje horizontal y al final del eje vertical:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  justify-items: start;
  align-items: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Ahora veamos nuestra cuadrícula en el depurador:

Al final del horizontal y al inicio del vertical

Coloquemos nuestros elementos en las celdas al final del eje horizontal y al inicio del eje vertical:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  justify-items: end;
  align-items: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Ahora veamos nuestra cuadrícula en el depurador:

Tareas prácticas