01
Elegir el modelo
Grid sirve para regiones nombradas en filas y columnas; Flexbox, para elementos en una dirección. Los valores de ambos modos permanecen al alternar.
- La cuadrícula inicial incluye cuatro áreas rectangulares.
Herramientas de diseño CSS
generador de diseños CSS— Comprueba el diseño antes de copiar
Alterna Grid y Flexbox y compara el lienzo, la vista previa y el código generado.
generador de diseños CSS
Elige una celda y luego la esquina opuesta.
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 16px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.area-header { grid-area: header; }
.area-sidebar { grid-area: sidebar; }
.area-main { grid-area: main; }
.area-footer { grid-area: footer; }
@media (max-width: 640px) {
.layout {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-template-areas: "header" "sidebar" "main" "footer";
}
}La configuración permanece en esta pestaña; no se sube ni se guarda un historial.
El código y la vista previa están actualizados.
Un encabezado, una barra lateral y el contenido principal forman un mapa difícil de escribir a mano en grid-template-areas. El generador de diseños CSS deja ver primero las áreas con nombre en una cuadrícula.
Para un menú o una fila de tarjetas suele bastar Flexbox. Este generador de diseños CSS conserva los ajustes de ambos modos: puedes volver al Grid sin reconstruir la página.
Por qué usar este generador de diseños CSS
El lienzo y el código exportado parten del mismo estado.
Grid y Flexbox en un solo lugar
El generador CSS Grid define áreas en dos ejes; el generador Flexbox distribuye elementos en uno. Cada modo recuerda sus pistas, alineaciones y separaciones al cambiar.
El móvil cambia también el código
El diseño responsive agrega una regla @media real a 640px. La vista estrecha representa el mismo HTML/CSS exportado, no una imagen reducida del escritorio.
Haz que vista previa y código coincidan
02
Editar pistas y áreas
Usa fr, px, auto o minmax() en las pistas. Elige un área y marca dos esquinas opuestas para pintar un rectángulo.
- Al desactivar la generación automática, Ctrl/Cmd+Entrar ejecuta el cálculo.
03
Comprobar el ancho móvil
Elige la vista de 390px y revisa el orden apilado. Si cambias los parámetros, copiar y descargar quedan desactivados hasta generar otra vez.
- Solo el ajuste de apilamiento móvil añade la consulta de medios.
De la geometría al marcado
Áreas Grid con nombre
El constructor de áreas de cuadrícula crea grid-template-areas y una regla grid-area para cada hijo HTML con el mismo nombre.
Controles de Flexbox
Dirección, salto de línea, alineación en ambos ejes, cantidad de elementos y separación se muestran con el motor real del navegador.
HTML y CSS adaptables
Un ajuste añade la regla móvil de 640px y permite copiar el HTML asociado o descargar un archivo independiente.
Límites de las áreas y la exportación
- Solo áreas rectangulares
- Un nombre dividido, superpuesto o con forma de L invalida grid-template-areas. El lienzo rechaza esos cambios y no deja exportar un resultado anterior como actual.
- Pistas comprobadas
- Se aceptan valores como 1fr, 200px, auto y minmax(120px, 1fr). Una entrada no admitida detiene la generación antes de producir CSS inválido.
- Un único punto de corte
- Por debajo de 640px se apilan las áreas. Tableta y escritorio solo cambian el ancho de vista previa; no se generan reglas individuales, Tailwind, SCSS ni React.
- HTML de ejemplo
- El código incluye áreas Grid o elementos Flex numerados. No analiza páginas existentes ni crea contenido y estilos completos para un sitio.
Preguntas sobre el generador de diseños CSS
¿Cuándo conviene usar Flexbox y cuándo CSS Grid?
Grid controla filas y columnas a la vez; Flexbox distribuye elementos sobre un eje. El generador de diseños CSS permite comparar ambas opciones sin perder los ajustes.
¿Cómo hago que una cuadrícula CSS sea responsiva?
Activa el apilamiento móvil y revisa la vista de 390px. La regla generada cambia a una columna bajo 640px; adapta ese umbral a tu contenido real si hace falta.
¿Qué diferencia hay entre filas y columnas de Grid?
Las filas y columnas forman pistas; sus tamaños se indican con fr, px, auto o minmax(). Las áreas asignan los hijos a celdas concretas.
¿Cómo se definen áreas con grid-template-areas?
Escribe el mismo nombre en las celdas de un rectángulo y asocia el hijo con grid-area. El constructor entrega tanto el mapa como la regla del hijo.
¿Puedo copiar el HTML junto con el CSS generado?
Sí. Copia CSS y HTML por separado o descarga un archivo que contiene ambos. Si la configuración cambió, primero vuelve a generar el resultado.
¿Falta un caso de diseño?
Prueba el generador de diseños CSS
Parte del ejemplo, inspecciona el resultado real del navegador e incorpora juntos el HTML y el CSS a tu proyecto.