Prueba Flexbox y CSS Grid
Experimenta con flexbox y CSS Grid en directo: dirección, alineación, salto de línea, columnas, espaciado y tamaño de cada elemento. Copia el código CSS.
- Gratis
- Sin registro
- Sin subir archivos
- Windows, Mac, Android, iPhone
Cargando la herramienta…
Acerca de esta herramienta
Aprende y ajusta flexbox y CSS Grid viendo el resultado al instante: dirección, salto de línea, justify-content, align-items, align-content, gap, columnas fijas o automáticas, y el tamaño de cada elemento (flex-grow, columnas o filas ocupadas). El código CSS está listo para copiar.
Cuándo usarla
Aprender maquetación CSS
Cambiar una propiedad y ver al instante cómo se mueven los elementos es la forma más rápida de entender justify-content frente a align-items.
Montar una barra de navegación
Logotipo a la izquierda, enlaces a la derecha: justify-content: space-between y align-items: center lo resuelven en dos líneas.
Crear una galería adaptable
Una cuadrícula con ancho mínimo muestra 1 columna en el móvil y 4 en pantallas grandes, sin media query.
Cómo se usa
- Elige Flexbox o Grid.
- Ajusta las propiedades del contenedor y mira cómo se mueven los elementos.
- Toca un elemento para ajustar su tamaño y copia el código.
Cómo funciona
La vista previa es una caja flexbox o grid real que tu navegador muestra con el código indicado, no una simulación. La zona de vista previa se puede redimensionar para probar distintos anchos.
Solo se escriben las propiedades que difieren de los valores por defecto. Los ajustes propios de un elemento generan una regla .element:nth-child(n) aparte.
Consejos para un mejor resultado
- Usa gap en lugar de márgenes: el espacio solo aparece entre los elementos.
- Para centrar un elemento a la perfección, bastan display: grid y place-items: center.
- flex-grow: 1 en un solo elemento hace que ocupe todo el espacio restante (barra de búsqueda, contenido principal).
- Redimensiona la zona de vista previa para comprobar el comportamiento en móvil.
Problemas frecuentes y soluciones
align-content no hace nada
Solo actúa con varias líneas: activa flex-wrap: wrap y añade elementos.
Los elementos se salen del contenedor
Con flex-wrap: nowrap se quedan en una línea. Pasa a wrap o hazlos más pequeños.
La cuadrícula solo tiene una columna
Con un ancho mínimo demasiado grande para la zona, solo cabe una columna. Reduce el ancho mínimo.
Preguntas frecuentes
Flexbox o Grid: ¿cuál elijo?
Flexbox coloca los elementos en una línea (o columna) y reparte el espacio entre ellos: barras de menú, botones, tarjetas alineadas. Grid organiza filas y columnas a la vez: maquetación de páginas, galerías, paneles.
¿Qué hace justify-content?
Reparte los elementos a lo largo del eje principal: al inicio, en el centro o al final, o con el mismo espacio entre ellos.
¿Cómo hago una cuadrícula que se adapte a la pantalla?
Indica un ancho mínimo: la cuadrícula usa repeat(auto-fill, minmax(…, 1fr)) y coloca tantas columnas como permita el ancho, sin media query.
¿Por qué faltan algunas propiedades en el código?
La herramienta solo escribe lo que difiere de los valores por defecto, para que el código sea corto y legible.
Búsquedas relacionadas
¿Sigues atascado?
Pregunta en el foro: la categoría, la herramienta, la ficha de tu dispositivo y el resultado de la prueba se rellenan solos.