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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#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
Cree una cuadrícula, que consista en cinco elementos, ubicados en tres filas. Realice la alineación de los elementos en las celdas al inicio del eje horizontal y al centro del eje vertical.
Ahora ubique los elementos de la cuadrícula en dos filas y establezca la alineación de los elementos dentro de las celdas al centro del eje horizontal y al inicio del eje vertical.
Modifique la tarea anterior, para que la alineación de los elementos ocurra al final del eje horizontal y al centro del eje vertical.
