Alineación del contenido
Propiedades que controlan cómo se distribuyen las filas y columnas del grid dentro del contenedor.
- justify-content: distribuye horizontalmente las columnas dentro del grid.
- align-content: distribuye verticalmente las filas dentro del grid.
- place-content: atajo para combinar justify-content y align-content.
- Posibles valores:
- stretch: Estira filas/columnas para ocupar todo el espacio disponible (predeterminado).
- start: Alinea todo el grid al inicio del eje (arriba o izquierda).
- center: Centra el grid en el eje.
- end: Sitúa todas las filas/columnas al final del eje (abajo o derecha).
- space-around: Reparte el espacio dejando márgenes iguales alrededor de cada grupo de filas o columnas (los bordes tienen la mitad de espacio que el interior).
- space-between: Distribuye filas o columnas de modo que la primera y la última queden pegadas a los bordes, y el espacio se reparta solo entre las del medio.
- space-evenly: Coloca espacios totalmente iguales entre todas las filas o columnas y también en los bordes.
Ejemplo
En este ejemplo dinámico, podemos comprobar las diferentes alineaciones de filas y columnas con las distintas propiedades de justify-content y align-content.
ResultadoEn vivo
html
css