Generador de layouts con CSS Grid
Ajusta columnas, filas y separación y obtén el código CSS Grid al instante
Una herramienta de CSS Grid pensada para maquetadores y desarrolladores front-end. Ajusta el número de columnas y filas, el tamaño de cada pista (1fr, px fijos, auto, minmax…) y la separación (gap) con sliders y desplegables: la vista previa se actualiza en tiempo real y puedes copiar el CSS y el HTML resultantes para pegarlos directamente en tu proyecto. Todo se calcula dentro del navegador, sin enviar ningún dato a servidores externos.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Usa los sliders para fijar el número de columnas y de filas, entre 1 y 6 cada uno.
- Ajusta el slider de separación (Gap) para definir el espacio entre celdas, de 0 a 40 px.
- En los selectores de tamaño de columna y de fila, asigna a cada pista la unidad que necesites: 1fr, 2fr, px fijos, auto o minmax.
- Revisa el resultado en la vista previa y pulsa el botón «Copiar código» de la parte inferior para llevarte el CSS y el HTML.
Preguntas frecuentes
- ¿Puedo usar el código generado tal cual en un proyecto real?
- Sí. Es CSS Grid estándar construido sobre las clases grid-container y grid-item, así que basta con pegarlo y cambiar los nombres de clase o el número de elementos según te convenga.
- ¿Se pueden crear más de 6 columnas o filas?
- Los sliders llegan hasta 6. Si necesitas más pistas, amplía a mano los valores de grid-template-columns o grid-template-rows en el CSS que has copiado.
- ¿Qué consigo usando minmax(100px, 1fr) en grid-template-columns?
- Garantizas que esa columna nunca baje de 100 px de ancho, pero dejas que crezca de forma flexible con el espacio sobrante en proporción 1fr. Es la forma habitual de evitar que el contenido se estreche demasiado en layouts responsive.