Visualiza los límites de las celdas de la cuadrícula para ver claramente cómo se posicionan los elementos hijos dentro de cada celda
Ajusta cuatro propiedades de alineación para observar diferentes niveles de efectos de alineación
Alineación vertical dentro de las celdas
Alineación horizontal dentro de las celdas
Alineación vertical de toda la cuadrícula
Alineación horizontal de toda la cuadrícula
align-items: center
| justify-items: center
| align-content: center
| justify-content: center
Cuadrícula 3x3 con espacio adicional del contenedor para demostrar efectos de alineación de contenido
start
- Alinear elementos hijos en la parte superior de la celdacenter
- Centrar elementos hijos verticalmenteend
- Alinear elementos hijos en la parte inferior de la celdastretch
- Estirar elementos hijos para llenar la altura de la celdastart
- Alinear elementos hijos a la izquierda de la celdacenter
- Centrar elementos hijos horizontalmenteend
- Alinear elementos hijos a la derecha de la celdastretch
- Estirar elementos hijos para llenar el ancho de la celdastart
- Alinear cuadrícula en la parte superior del contenedorcenter
- Centrar cuadrícula verticalmenteend
- Alinear cuadrícula en la parte inferior del contenedorspace-*
- Distribuir espacio entre filas de la cuadrículastart
- Alinear cuadrícula a la izquierda del contenedorcenter
- Centrar cuadrícula horizontalmenteend
- Alinear cuadrícula a la derecha del contenedorspace-*
- Distribuir espacio entre columnas de la cuadrícula