Generador de diseño CSS Grid
Diseña una cuadrícula CSS visualmente y copia el código al instante
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Un creador visual de CSS Grid para desarrolladores y diseñadores web. Ajusta el número de columnas y filas, elige un tamaño para cada pista (1fr, píxeles fijos, auto, minmax y más) y define el espacio (gap): la vista previa se actualiza en tiempo real y el código CSS y HTML final queda listo para copiar en tu proyecto. Todo se procesa localmente en el navegador, sin enviar datos a ningún servidor.
Cómo usar
- Ajusta el número de Columnas y Filas con los deslizadores, entre 1 y 6 cada uno.
- Usa el deslizador de Gap para controlar el espacio entre los elementos de la cuadrícula, de 0 a 40px.
- En Tamaños de columna y Tamaños de fila, elige una unidad de tamaño para cada pista, como 1fr, 2fr, píxeles fijos, auto o minmax.
- Revisa la vista previa en vivo y pulsa 'Copiar código' para obtener el CSS y HTML finales.
Preguntas frecuentes
- ¿Puedo usar el código generado directamente en mi proyecto?
- Sí, es CSS Grid estándar basado en las clases grid-container y grid-item; solo pégalo y ajusta los nombres de clase o la cantidad de elementos según necesites.
- ¿Puedo crear más de 6 columnas o filas?
- Los deslizadores están limitados a 6 por ahora. Para más pistas, copia el CSS y extiende manualmente los valores de grid-template-columns/rows.
- ¿Qué hace minmax(100px, 1fr)?
- Garantiza un ancho mínimo de 100px para esa pista mientras permite que crezca de forma flexible con proporción 1fr, evitando que el contenido quede demasiado apretado en diseños responsivos.