Unidad 13. Posicionamiento. Flexbox. Grid (XXXI)

13.22. Rejilla. Justify-seft y align-seft

Alinear celdas concretas

Estas dos propiedades (justify-items y align-items) que acabamos de ver afectan a todos los elementos de la rejilla, pero podemos aplicar el mismo tipo de alineación a elementos concretos de la rejilla con las propiedades justify-seft y align-seft.

Por ejemplo la rejilla tiene justify-items: stretch; pero la celda 2 tiene justify-seft: start, la 3 tiene justify-self: end, y la cuatro tiene justify-self: center;

Este otro ejemplo la rejilla tiene align-items: stretch; pero la celda 2 tiene align-self: start, la celda 3 tiene align-self: end, y la celda cuatro align-self: center.

Estos tipos de alineación sólo tiene sentido cuando la celda se encuentra dentro de un área más amplia y por lo tanto puede desplazarse en algún eje.

Podemos hacer combinaciones para cada celda con propiedades justify-seft y align-seft, por ejemplo,

 <div  style="align-self: start; justify-self: end;">celda 1</div>
 <div  style="align-self: center; justify-self: end;">celda 2 </div>
 <div  style="align-self: center; justify-self: start;">celda 3</div>
 <div  style="align-self: center; justify-self: center;">celda 4</div>

 Cursos Informática Gratuitos