Generador visual de Flexbox y Grid

Cómo usar el generador de Flexbox y Grid

1. Elige un Diseño: Flexbox o Grid, o parte de uno de los Ajustes predefinidos (Centrado, Barra de navegación, Tarjetas con salto de línea, Barra lateral, Cuadrícula de tarjetas adaptable, Santo grial, 12 columnas).
2. Ajusta las propiedades del Contenedor. En flexbox: flex-direction y flex-wrap. En grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items y grid-template-areas. Ambos comparten justify-content, align-items, align-content, row-gap (px) y column-gap (px).
3. Gestiona los Elementos con Añadir elemento, Eliminar el elemento seleccionado y Restablecer el elemento seleccionado. Haz clic en un elemento de la vista previa (o llega a él con el tabulador y pulsa Intro) para seleccionarlo.
4. Edita el elemento seleccionado: order y align-self en los dos modos; flex-grow, flex-shrink y flex-basis en flexbox, y grid-area, grid-column, grid-row y justify-self en grid.
5. Copia el Código CSS y el Código HTML correspondiente con sus botones Copiar.

Cada control es un campo de formulario estándar, así que todo el generador funciona solo con el teclado. El CSS contiene únicamente las propiedades que has cambiado respecto a sus valores por defecto, lo que lo mantiene breve, y los elementos con los mismos ajustes comparten una regla (.item cuando coinciden todos).

Flexbox en pocas palabras

Flexbox coloca los elementos a lo largo de un eje. flex-direction define el eje principal (una fila o una columna); justify-content reparte los elementos sobre él (center, space-between…) y align-items los sitúa en el eje transversal. Con flex-wrap: wrap, los elementos que no caben pasan a una nueva línea, y align-content distribuye después esas líneas.

Cada elemento tiene tres propiedades de tamaño, que suelen escribirse juntas como flex:

• flex-basis: el tamaño inicial (auto usa el contenido o el width);
• flex-grow: cuánto espacio libre ocupa el elemento (0 = nada, 1 = una parte igual);
• flex-shrink: cuánto cede cuando falta espacio (0 = nunca se encoge).

El ajuste Barra lateral muestra el patrón clásico: una barra lateral con flex-basis: 200px y flex-shrink: 0, y una zona principal con flex-grow: 1.

CSS Grid en pocas palabras

Grid coloca los elementos en dos dimensiones. grid-template-columns: repeat(3, 1fr) crea tres columnas iguales; fr es una fracción del espacio libre. repeat(auto-fill, minmax(120px, 1fr)) crea tantas columnas de al menos 120px como quepan, lo que da una cuadrícula de tarjetas adaptable sin ninguna media query.

Los elementos rellenan las celdas en orden, salvo que los coloques tú: grid-column: span 2 hace que un elemento ocupe dos columnas, y grid-column: 1 / -1 lo extiende a lo largo de toda la fila.

grid-template-areas te permite dibujar el diseño con nombres. Escribe una fila por línea, por ejemplo header header y luego nav main, y asigna a los elementos grid-area: header o grid-area: main. Un punto marca una celda vacía. Todas las filas deben tener el mismo número de celdas y cada nombre debe formar un rectángulo; si no, la herramienta te avisa.