Generador de Flexbox y Grid
Maqueta una fila, una columna o una cuadrícula completa de forma visual y observa cómo se actualiza el CSS mientras lo haces. Cambia entre flexbox y CSS grid, define la dirección, la alineación, el ajuste de línea, el número de columnas y filas y el espacio, y luego lee el resultado en una vista previa en vivo hecha de cajas numeradas que se comportan exactamente como elementos reales. En lugar de recordar si centrar necesita justify-content o align-items, cambias un control y ves cómo se mueven las cajas. La salida es CSS sencillo y listo para copiar para una clase contenedora, calculado por completo en el navegador, así que puedes ponerlo directamente en una hoja de estilos, un componente o una capa de Tailwind sin que nada salga de la página.
- Cambia entre flexbox y CSS grid sin perder la maquetación que estabas dando forma
- Controla dirección, justify, align, ajuste de línea, columnas, filas y espacio con feedback instantáneo
- Una vista previa en vivo de cajas numeradas muestra exactamente cómo cada propiedad mueve los elementos reales
- Copia un CSS limpio para una clase contenedora, listo para hojas de estilos, componentes o Tailwind
- Todo se calcula en el navegador, así que nada de tu maquetación se sube
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
Resumen
Reúne los dos sistemas de maquetación CSS a los que la gente recurre a diario en un solo panel, para que elijas el adecuado para cada tarea y lo ajustes a ojo en lugar de adivinar nombres de propiedades en una hoja de estilos.
- 01
Flexbox y grid en un solo lugar
Alterna entre flexbox para filas y columnas unidimensionales y CSS grid para maquetaciones bidimensionales, manteniendo el mismo espacio y número de elementos mientras los comparas.
- 02
Cada propiedad de alineación a la vista
Dirección, justify-content, align-items, ajuste de línea y align-content para flex, además de columnas, filas, auto-flow, justify-items y align-items para grid, todo como controles directos.
- 03
Una vista previa que se comporta como elementos reales
Las cajas numeradas responden a cada propiedad igual que lo hacen los hijos reales, así que puedes ver de un vistazo si los elementos se centran, se reparten, se estiran o se ajustan a varias líneas.
- 04
Ajustes predefinidos de partida sensatos
Recetas comunes como una fila centrada, una barra con espacio entre elementos, una pila vertical, una fila con ajuste y cuadrículas están a un clic, listas para refinar.
- 05
Salida limpia y lista para copiar
El CSS apunta a una única clase contenedora y la estructura HTML correspondiente está disponible al lado, así que ambas piezas son fáciles de pegar en una hoja de estilos, un componente o un prototipo.
- 06
Local y privado por defecto
Cada vista previa y cada línea de CSS generado se calculan en el navegador, lo que mantiene las maquetaciones sin publicar y la interfaz interna fuera de cualquier servidor.
Cómo usarla
Pasa de un contenedor vacío a un CSS de maquetación funcional en unos pocos pasos, tanto si reproduces un diseño como si aprendes cómo se relacionan las propiedades.
- 01
Elige flexbox para una sola fila o columna, o grid para una maquetación con columnas y filas a la vez.
- 02
Elige un ajuste predefinido cercano a lo que quieres, o parte del predeterminado y ajusta los controles de uno en uno.
- 03
Define las propiedades principales: dirección y justify o align para flex, o número de columnas y filas para grid.
- 04
Ajusta el espacio y el número de elementos hasta que la vista previa coincida con el espaciado y la densidad que necesitas.
- 05
Lee la maquetación en las cajas de vista previa y luego copia el CSS del contenedor en tu hoja de estilos o componente.
Detalles
Flexbox y grid cubren casi cualquier maquetación moderna, así que un editor visual para ellos necesita corresponderse limpiamente con el CSS real en lugar de ocultarlo tras nombres inventados.
- Los controles de flexbox cubren flex-direction, flex-wrap, justify-content, align-items y align-content
- Los controles de grid cubren columnas y filas de plantilla con pistas repeat y 1fr, grid-auto-flow, justify-items y align-items
- Un espacio y un número de elementos compartidos te permiten comparar el mismo contenido con flexbox y con grid
- La vista previa usa contenedores flex y grid reales, así que la alineación, el ajuste de línea y la distribución se comportan de forma auténtica
- align-content aparece solo cuando el ajuste de línea está activado, reflejando cuándo la propiedad tiene efecto de verdad
- Los ajustes predefinidos cubren el centrado, las barras con espacio entre elementos, las pilas verticales, las filas con ajuste y las cuadrículas de varias columnas
- Una acción de aleatorizar explora combinaciones de propiedades desconocidas para construir intuición rápidamente
- La salida incluye un CSS de contenedor limpio y una estructura HTML correspondiente, fáciles de leer y adaptar
- El CSS generado se pega directamente en hojas de estilos, módulos CSS, estilos de componente o capas de Tailwind
- Todo el cálculo se ejecuta localmente en el navegador, así que las maquetaciones del trabajo sin publicar siguen siendo privadas
Casos de uso
Las preguntas de maquetación surgen constantemente en el trabajo de frontend, y la mayoría son en realidad preguntas sobre qué propiedad de flex o grid usar. Ver la respuesta moverse en pantalla es más rápido que leer otra referencia.
-
Centrar contenido
Confirma qué combinación de justify-content y align-items centra una caja tanto en horizontal como en vertical, en lugar de adivinar entre las dos.
-
Barras de navegación
Empuja un logo a un lado y los enlaces al otro con space-between, un patrón que aparece en casi todas las cabeceras y barras de herramientas.
-
Cuadrículas de tarjetas y productos
Maqueta tarjetas en columnas uniformes con espacios consistentes usando grid, y luego ajusta el número de columnas para ver cómo se reorganiza la maquetación.
-
Filas con ajuste responsive
Observa cómo flex-wrap y align-content organizan etiquetas, chips o botones cuando ya no caben en una sola línea.
-
Formularios y campos apilados
Apila etiquetas e inputs en una columna con espaciado uniforme, una maquetación flex común para formularios, paneles de ajustes y barras laterales.
-
Galerías y paneles
Organiza miniaturas o widgets en una cuadrícula ordenada y juzga el espaciado y la densidad antes de conectar el contenido real.
-
Aprender flex y grid
Cambia una propiedad cada vez y observa cómo responden las cajas, lo que construye intuición sobre cómo funcionan realmente los sistemas de maquetación.
-
Prototipar maquetaciones rápido
Esboza la estructura de una página o componente de forma visual y copia el CSS del contenedor como punto de partida para el marcado real.
Ver también
Una vez que la maquetación está en su sitio, da profundidad y elevación a las superficies con Generador de sombras y, cuando una sección necesita un fondo más rico, diséñala junto a la maquetación usando Generador de degradados para que el espaciado, la profundidad y el color se mantengan coherentes en todo el componente.
Buenas prácticas
Flexbox y grid son indulgentes para experimentar pero fáciles de usar mal, así que unos pocos hábitos mantienen las maquetaciones generadas robustas entre pantallas y contenidos.
- Recurre a flexbox cuando el contenido fluye en una dirección y a grid cuando necesitas filas y columnas juntas.
- Prefiere la propiedad gap a los márgenes en los hijos, ya que espacia los elementos de forma uniforme sin márgenes de casos límite que limpiar.
- Usa justify-content para el espaciado a lo largo del eje principal y align-items para el eje transversal, y comprueba cuál es cuál en la vista previa.
- Deja que el contenido y el espacio disponible dirijan el ajuste de línea en lugar de codificar breakpoints para cada pequeño cambio.
- Para grid, repeat con 1fr mantiene las columnas uniformes, mientras que los tamaños de pista explícitos son mejores cuando los anchos deben diferir.
- Prueba las maquetaciones con pocos y con muchos elementos, porque las propiedades de distribución se comportan distinto a medida que crece el contenido.
- Convierte las recetas de maquetación recurrentes en clases o componentes reutilizables en lugar de repetir las mismas propiedades por todas partes.
- Verifica el resultado en los breakpoints reales del proyecto, ya que la vista previa muestra la mecánica pero no el ancho exacto de tu contenedor.
Limitaciones
Esta herramienta se centra en las propiedades de contenedor centrales que dan forma a una maquetación, así que algunas áreas relacionadas quedan fuera de alcance de forma intencionada.
- Genera CSS de contenedor. Las reglas por elemento como flex-grow, flex-basis, order y los tramos de columna o fila de grid no se producen aquí.
- Las pistas de grid usan repeat con 1fr. Las líneas con nombre, grid-template-areas y las pistas que mezclan fijas y fraccionarias necesitan edición a mano.
- La vista previa usa un contenedor de altura fija, así que las maquetaciones que dependen de la altura real del contenido deben confirmarse en el proyecto.
- El comportamiento responsive entre breakpoints depende de los anchos reales de tu contenedor y de las media queries o container queries.
- Las diferencias entre navegadores son mínimas para flex y grid modernos, pero los navegadores muy antiguos pueden necesitar fallbacks que esta herramienta no añade.
- No genera la estructura HTML completa, solo el CSS de un contenedor que aplicas a tu propio marcado.
Preguntas frecuentes
Preguntas que surgen con más frecuencia al elegir entre flexbox y grid y al traducir una idea de maquetación en CSS funcional.
¿Debo usar flexbox o grid?
Usa flexbox cuando el contenido fluye en una sola dirección, como una fila de botones o una columna de campos. Usa grid cuando necesitas controlar columnas y filas a la vez, como una galería de tarjetas o un panel.
¿El CSS generado está listo para producción?
Sí. La salida es CSS estándar para una clase contenedora y puede pegarse en hojas de estilos, módulos CSS, estilos de componente o una capa de Tailwind sin cambios.
¿Cómo centro algo en ambas direcciones?
En flexbox, pon justify-content y align-items en center. En grid, pon justify-items y align-items en center. La vista previa lo confirma en cuanto cambias los controles.
¿Por qué align-content solo aparece a veces?
align-content solo afecta a un contenedor flex cuando los elementos se ajustan a más de una línea, así que el control aparece cuando activas el ajuste de línea, lo que refleja cuándo la propiedad hace algo de verdad.
¿Genera propiedades por elemento?
No. Esta herramienta se centra en las propiedades de contenedor. Las reglas por elemento como flex-grow, flex-basis, order y los tramos de grid son detalles de maquetación que añades a los hijos individuales después.
¿Puedo usar la salida con Tailwind?
Sí. Puedes pegar el CSS en una capa personalizada o una clase de componente, o usarlo como referencia para las clases de utilidad equivalentes de flex y grid.
¿Qué significa 1fr en la salida de grid?
Una unidad fr es una fracción del espacio libre en la cuadrícula. repeat(3, 1fr) crea tres columnas que se reparten a partes iguales el ancho disponible.
¿Se sube mi maquetación mientras edito?
No. Todo el renderizado de la vista previa y la generación de CSS ocurren localmente en el navegador, lo que hace la herramienta segura para interfaces de producto sin publicar y trabajo de diseño confidencial.
Herramientas relacionadas
La maquetación es el marco dentro del que se asienta todo lo demás. Una vez fijada la estructura, pasa a la profundidad y el fondo para que el componente se lea como una superficie terminada, no solo como una disposición de cajas.