Generador de CSS Grid
Fija solo el número de columnas y filas y el espaciado para generar al instante el CSS de grid-template con vista previa
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Ajusta con deslizadores el número de columnas y filas y el espaciado entre celdas, y el CSS de grid-template se genera al momento junto con una vista previa. Ya no tienes que calcular a mano maquetaciones regulares como listas de tarjetas, galerías o paneles: solo copia y pega.
Cómo usar
- Introduce el número de columnas (columns) y filas (rows) para crear el esqueleto de la cuadrícula.
- Ajusta el margen entre celdas con el deslizador de gap. Para dar valores distintos en horizontal y vertical, desmarca «Igual».
- Comprueba la disposición de las celdas en la vista previa y copia luego el CSS de abajo.
- Al meter las tarjetas hijas dentro del elemento padre pegado, se colocan automáticamente según la cuadrícula.
Preguntas frecuentes
- ¿Qué significa 1fr?
- fr es la abreviatura de fraction (fracción) y representa una porción igual del espacio sobrante. repeat(3, 1fr) divide el ancho del padre en tres columnas iguales.
- ¿Cómo hago que el número de columnas cambie solo según el tamaño de pantalla?
- Si cambias grid-template-columns por repeat(auto-fit, minmax(200px, 1fr)), obtienes una cuadrícula adaptable cuyo número de columnas se reduce automáticamente cuando el ancho disminuye. También hay un ejemplo en el texto de ayuda.
- ¿Puedo fiarme del CSS generado tal cual?
- Solo usa propiedades estándar de CSS Grid, así que funciona directamente en los navegadores modernos. Pero la vista previa solo muestra celdas de ejemplo, así que usa el resultado como referencia y comprueba en tu proyecto la altura y alineación reales del contenido.