Organiza filas, columnas y elementos visualmente. Previsualiza tu diseño a cualquier tamaño, luego exporta el HTML y CSS limpios.
Constructor de diseños con CSS Grid
Vista previa en vivo
Código de solo lectura. Usa los controles de diseño para actualizar el código y la vista previa en vivo.
El CSS es solo de maquetación. La descarga del HTML incluye tanto el código como el estilo de ejemplo.
Privacidad primero — tu maquetación permanece en tu navegador
De una idea a una maquetación con CSS Grid
CSS Grid organiza el contenido en filas y columnas. Este generador visual de CSS Grid te permite crear galerías de tarjetas, diseños de barra lateral y paneles de control sin escribir cada regla de la cuadrícula a mano. La vista previa utiliza el mismo CSS de diseño que tu exportación.
Cómo generar tu cuadrícula
Elige Tarjetas, Barra lateral o Panel de control como tu diseño inicial.
Establece las columnas, filas y espacios. Selecciona un elemento para cambiar su posición o expansión.
Prueba un ancho de vista previa más pequeño, luego copia el CSS o descarga un ejemplo HTML completo.
Adaptable por diseño
Activa “Apilar en pantallas pequeñas” para generar una media query de 640px. En pantallas más pequeñas, los elementos vuelven a una sola columna en el orden del HTML. Las vistas previas de escritorio y tableta se escalan para ajustarse a tu espacio de trabajo; el ancho en píxeles que se muestra es el viewport real de la vista previa.
Lo que admite el generador
Usa hasta 12 columnas de igual ancho, 12 filas y 48 elementos. Las filas crecen con su contenido. Los elementos no pueden superponerse. Cambiar el número de pistas reorganiza tus elementos; si no caben, se conserva tu último diseño válido. Para tamaños de pista personalizados, cuadrículas anidadas o breakpoints adicionales, edita el CSS exportado en Phoenix Code.
Preguntas sobre CSS Grid
¿El diseño descargado necesita alguna librería?
No. La exportación utiliza HTML y CSS Grid nativos. El HTML descargado es un ejemplo completo con estilos incrustados y funciona sin este generador ni conexión a internet.
¿Cuál es la diferencia entre CSS Grid y Flexbox?
Grid controla filas y columnas a la vez, lo que lo hace útil para diseños de página y colecciones de tarjetas. Flexbox distribuye los elementos en un solo eje, lo que lo hace útil para barras de herramientas y menús de navegación. Una página puede usar ambos.
¿Se sube mi diseño a alguna parte?
La generación y exportación del diseño se ejecutan localmente en tu navegador. Los valores del diseño, las etiquetas y el código generado se excluyen de las analíticas. Actualizar la página reinicia el generador, así que descarga tu HTML para guardar tu trabajo.
CSS generado (solo lectura)HTML generado (solo lectura)ElementoDiseño de CSS Grid generadoAñade filas o elimina un elemento para hacer espacio.Estas pistas no admiten todos tus elementos. Añade filas o elimina elementos primero.Esa posición se solapa con otro elemento o se extiende fuera de la cuadrícula. Elige una posición libre o una expansión más pequeña.Introduce un número entero dentro del rango que muestra este control.Disposición actualizada.Disposición anterior restaurada.Código copiado.No se pudo acceder al portapapeles. Selecciona el código y cópialo manualmente.HTML descargado. Abre el archivo en Phoenix Code para seguir construyendo.No se pudo crear la descarga. En su lugar, copia el HTML y el CSS.Disposición apiladaDiseño de cuadrículaElemento seleccionado.Usa las teclas de flecha para mover este elemento. Mantén pulsado Mayús para cambiar su extensión.Diseño inicial cargado. Deshacer restaura tu trabajo anterior.Diseño inicial cargado.Este constructor admite hasta 48 elementos.Diseño por defecto restaurado. Deshacer está disponible.Diseño por defecto restaurado.