Todos los datos se procesan localmente

Demostración de CSS Grid Align & Justify

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

Panel de Control

Ajusta cuatro propiedades de alineación para observar diferentes niveles de efectos de alineación

Align Items

Alineación vertical dentro de las celdas

Justify Items

Alineación horizontal dentro de las celdas

Align Content

Alineación vertical de toda la cuadrícula

Justify Content

Alineación horizontal de toda la cuadrícula

Configuración actual: align-items: center | justify-items: center | align-content: center | justify-content: center

Área de Demostración de Grid

Cuadrícula 3x3 con espacio adicional del contenedor para demostrar efectos de alineación de contenido

A

B

C

D

E

F

G

H

I

Explicaciones de Propiedades

Propiedades Items (Alineación dentro de celdas)

Align Items (Vertical)

start - Alinear elementos hijos en la parte superior de la celda
center - Centrar elementos hijos verticalmente
end - Alinear elementos hijos en la parte inferior de la celda
stretch - Estirar elementos hijos para llenar la altura de la celda

Justify Items (Horizontal)

start - Alinear elementos hijos a la izquierda de la celda
center - Centrar elementos hijos horizontalmente
end - Alinear elementos hijos a la derecha de la celda
stretch - Estirar elementos hijos para llenar el ancho de la celda

Propiedades Content (Alineación de toda la cuadrícula)

Align Content (Vertical)

start - Alinear cuadrícula en la parte superior del contenedor
center - Centrar cuadrícula verticalmente
end - Alinear cuadrícula en la parte inferior del contenedor
space-* - Distribuir espacio entre filas de la cuadrícula

Justify Content (Horizontal)

start - Alinear cuadrícula a la izquierda del contenedor
center - Centrar cuadrícula horizontalmente
end - Alinear cuadrícula a la derecha del contenedor
space-* - Distribuir espacio entre columnas de la cuadrícula

Herramientas relacionadas

Aprender CSS Flexbox

Herramienta de aprendizaje interactiva de CSS Flexbox con demostraciones visuales

Aprender CSS Grid

Herramienta de aprendizaje interactiva de CSS Grid con demostraciones visuales

All Tools →

Explore all tools