Una de las grandes ventajas de CSS Grid es su capacidad para alinear y justificar elementos de manera precisa y flexible. Con CSS Grid, puedes controlar tanto la alineación de los propios elementos de la cuadrícula como la del contenido dentro de estos.

Propiedades de Alineación y Justificación en CSS Grid

justify-content

La propiedad justify-content se utiliza para alinear las columnas del grid dentro del contenedor principal en el eje horizontal.

• start: Alinea las columnas al inicio del contenedor.
• end: Alinea las columnas al final del contenedor.
• center: Centra las columnas en el contenedor.
• space-around: Distribuye las columnas con espacio alrededor.
• space-between: Distribuye las columnas con espacio entre para evitar cualquier espacio al inicio o final.
• space-evenly: Distribuye las columnas con el mismo espacio antes, entre y después de las columnas.

css

align-content

La propiedad align-content se utiliza para alinear las filas del grid dentro del contenedor principal en el eje vertical.

• start: Alinea las filas al inicio del contenedor.
• end: Alinea las filas al final del contenedor.
• center: Centra las filas en el contenedor.
• space-around: Distribuye las filas con espacio alrededor.
• space-between: Distribuye las filas con espacio entre.
• space-evenly: Distribuye las filas con el mismo espacio antes, entre y después de las filas.

css

justify-items

La propiedad justify-items se utiliza para alinear los elementos individuales dentro de sus áreas de grid en el eje horizontal.

• start: Alinea los elementos al inicio de sus áreas de grid.
• end: Alinea los elementos al final de sus áreas de grid.
• center: Centra los elementos dentro de sus áreas de grid.
• stretch: Estira los elementos para que llenen completamente sus áreas de grid (valor predeterminado).

css

align-items

La propiedad align-items se utiliza para alinear los elementos en el eje vertical dentro de sus áreas de grid.

• start: Alinea los elementos al inicio de sus áreas de grid.
• end: Alinea los elementos al final de sus áreas de grid.
• center: Centra los elementos dentro de sus áreas de grid.
• stretch: Estira los elementos para que llenen completamente sus áreas de grid (valor predeterminado).

css

Ejemplo Completo

Apliquemos estas propiedades en un ejemplo completo para ver cómo funcionan en conjunto:

html

En este ejemplo, utilizamos tanto justify-content como align-content para distribuir uniformemente las filas y columnas. Además, usamos justify-self y align-self en los elementos individuales para centrarlos dentro de sus áreas de grid.

Conclusión

Las propiedades de alineación y justificación en CSS Grid te ofrecen un control preciso sobre cómo se disponen las filas, columnas y elementos individuales dentro de un layout. Esto te permite crear interfaces limpias y bien organizadas con facilidad, haciendo de CSS Grid una herramienta esencial para cualquier desarrollador web.