Alineación dentro de celdas de cuadrícula CSS en el eje vertical
Para alinear elementos dentro de las celdas de la cuadrícula
en el eje vertical usamos
la propiedad align-items, que
se establece en el elemento padre. El funcionamiento de esta propiedad
se puede ver al inspeccionar la cuadrícula en las herramientas
de desarrollo del navegador.
Al inicio del eje
Alineemos nuestros elementos dentro de las celdas al inicio del eje vertical:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: flex-start;
grid-template-columns: 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;
}
:
Veamos nuestra cuadrícula en las herramientas de desarrollo del navegador:
Al centro del eje
Y ahora alineemos nuestros elementos en las celdas al centro del eje vertical:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: center;
grid-template-columns: 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;
}
:
Veamos nuestra cuadrícula en las herramientas de desarrollo del navegador:
Al final del eje
Cambiemos nuevamente la alineación de los elementos, esta vez al final del eje vertical:
<div id="parent">
<div id="elem1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
align-items: end;
grid-template-columns: 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;
}
#elem1 {
}
:
Veamos nuestra cuadrícula en las herramientas de desarrollo del navegador:
Tareas prácticas
Crea una cuadrícula, que consista de seis elementos, ubicados en dos columnas. Realiza la alineación de los elementos dentro de las celdas al inicio del eje vertical.
Ahora ubica los elementos de la cuadrícula en tres columnas y establece la alineación de los elementos en las celdas al centro del eje vertical de la cuadrícula.
Modifica la tarea anterior de modo que la alineación de los elementos ocurra al final del eje vertical.
