Generador de grid CSS
Crea pistas y áreas con vista previa de grid local y HTML/CSS.
- Funciona en tu navegador
- Sin subir archivos
- Revisa antes de descargar
Las entradas permanecen en esta pestaña; no se suben ni se guardan automáticamente. Los recuentos agregados de uso y los diagnósticos generales de procesamiento son opcionales y solo se envían con consentimiento, sin contenido ni nombres de archivo. Al borrar o cerrar se pierden las entradas; guarda antes los resultados necesarios.
Límites de recursos
Grid: fr0.01–100 / px0–2000 / %0–100 / auto; [a-z][a-z0-9_-]{0,19}. 1–8 pistas por eje (fr/px/%/auto), espacio 0–100px, hasta 64 celdas. Cada área debe ser un rectángulo. El punto indica una celda vacía. La vista previa y el exportado usan los mismos elementos. La vista previa es local y limitada: no garantiza el mismo resultado en todos los navegadores ni diseños. Lo que escribes no se ejecuta. El HTML y el CSS se descargan juntos. Límite: 8 segundos.
Cómo usarlo
- Configura el ejemplo
Añade columnas y filas, elige unidad, tamaño y espacio. Rellena celdas con nombres rectangulares repetidos o puntos. Genera y revisa posiciones antes de exportar HTML y CSS.
- Revisa antes de usar
Las entradas permanecen en esta pestaña; no se suben ni se guardan automáticamente. Los recuentos agregados de uso y los diagnósticos generales de procesamiento son opcionales y solo se envían con consentimiento, sin contenido ni nombres de archivo. Al borrar o cerrar se pierden las entradas; guarda antes los resultados necesarios. Grid: fr0.01–100 / px0–2000 / %0–100 / auto; [a-z][a-z0-9_-]{0,19}. 1–8 pistas por eje (fr/px/%/auto), espacio 0–100px, hasta 64 celdas. Cada área debe ser un rectángulo. El punto indica una celda vacía. La vista previa y el exportado usan los mismos elementos. La vista previa es local y limitada: no garantiza el mismo resultado en todos los navegadores ni diseños. Lo que escribes no se ejecuta. El HTML y el CSS se descargan juntos. Límite: 8 segundos.
- Exporta el resultado revisado
Descargar resultado; Descargar original
Preguntas y límites
Límites de recursos
Grid: fr0.01–100 / px0–2000 / %0–100 / auto; [a-z][a-z0-9_-]{0,19}. 1–8 pistas por eje (fr/px/%/auto), espacio 0–100px, hasta 64 celdas. Cada área debe ser un rectángulo. El punto indica una celda vacía. La vista previa y el exportado usan los mismos elementos. La vista previa es local y limitada: no garantiza el mismo resultado en todos los navegadores ni diseños. Lo que escribes no se ejecuta. El HTML y el CSS se descargan juntos. Límite: 8 segundos.
Diseño sin conexión
Las entradas permanecen en esta pestaña; no se suben ni se guardan automáticamente. Los recuentos agregados de uso y los diagnósticos generales de procesamiento son opcionales y solo se envían con consentimiento, sin contenido ni nombres de archivo. Al borrar o cerrar se pierden las entradas; guarda antes los resultados necesarios.
Revisa antes de usar
Añade columnas y filas, elige unidad, tamaño y espacio. Rellena celdas con nombres rectangulares repetidos o puntos. Genera y revisa posiciones antes de exportar HTML y CSS.