Una herramienta en línea para crear diseños Flexbox y Grid de CSS de forma intuitiva. Diseña diseños complejos visualmente mediante arrastrar y soltar o ajustando parámetros.

Soporta tanto Flexbox (justify-content, align-items, flex-wrap) como CSS Grid (grid-template-columns, gap). Puedes ajustar las propiedades mientras ves la vista previa en tiempo real.

Todo el procesamiento se realiza en el navegador, sin enviar datos al servidor.

Flexbox

Módulo de diseño CSS3. Ideal para diseños unidimensionales (fila o columna), comúnmente usado en menús de navegación o listas de tarjetas.

CSS Grid

Módulo de diseño bidimensional CSS3. Potente para estructurar diseños de página completos.

justify-content

Propiedad para controlar la alineación a lo largo del eje principal.

align-items

Propiedad para controlar la alineación en el eje transversal.

Q. ¿Cómo elegir entre Flexbox y Grid?

A. En general, usa Flexbox para diseños unidimensionales y Grid para bidimensionales. Un patrón común es usar Flexbox dentro de los componentes y Grid para el diseño general de la página.

Q. ¿Puede generar CSS responsivo?

A. No exporta media queries directamente (@media), pero puedes crear diseños responsivos básicos mediante `flex-wrap` o `repeat(auto-fit, minmax(...))` en Grid.

Q. ¿Soporta IE11?

A. Genera CSS moderno, por lo que algunas características (especialmente Grid y gap) podrían no funcionar correctamente en IE11.