Generador de CSS grid y flexbox

Qué hace

Dos constructores para los dos sistemas de maquetación de CSS, con vista previa dibujada por tu navegador y tres salidas: CSS, el HTML correspondiente y las mismas reglas como clases de Tailwind CSS v4.

En Grid defines columnas y filas con fr, px, %, auto, min-content, max-content o minmax(px, fr); las pistas iguales se escriben con repeat(); ajustas los huecos y la alineación, activas el modo repeat(auto-fit, minmax(…, 1fr)) y pintas áreas con nombre haciendo clic o arrastrando sobre las celdas. En Flexbox eliges dirección, ajuste de línea, justify-content, align-items, align-content, hueco y, por elemento, flex-grow, flex-shrink, flex-basis, order y align-self.

Detalles importantes

Cada área con nombre debe ser un único rectángulo lleno: una forma de L invalida todo grid-template-areas, y la herramienta lo detecta antes de que copies el código. fr reparte el espacio que queda tras las pistas fijas y los huecos. flex: 1 equivale a grow 1, shrink 1 y basis 0%, así que los elementos quedan iguales. order cambia solo el orden visual, no el del teclado ni el de los lectores de pantalla.