Generador de CSS Grid
Genera código CSS Grid con columnas, filas y espaciados personalizables en píxeles y fracciones.
Ejecutar herramienta
Este generador crea reglas CSS Grid listas para integrar en hojas de estilo y maquetaciones web. Puedes definir la estructura de columnas y filas mediante números enteros o cadenas personalizadas de medidas. Cuando introduces un número entero en las columnas, el generador aplica la función repeat con fracciones unitarias, mientras que en las filas utiliza medidas automáticas. Si prefieres un control más específico, puedes escribir listas de anchos directas, como combinaciones en píxeles, porcentajes o fracciones. Los controles de espaciado admiten valores numéricos en píxeles para el margen global, así como ajustes independientes para columnas y filas. El bloque resultante incluye la declaración principal de cuadrícula junto con las propiedades de plantilla y separación configuradas, facilitando una copia rápida del código sin necesidad de escribir la sintaxis manualmente cada vez.
Instrucciones
- Indica el número de columnas o escribe una distribución personalizada como 200px 1fr.
- Define las filas deseadas con un número entero, el valor auto o una lista de alturas.
- Introduce la distancia de separación general en píxeles si deseas un margen uniforme.
- Opcionalmente, especifica valores numéricos en píxeles para separar columnas o filas por separado.
- Copia el fragmento CSS generado para pegarlo en tu clase o selector de estilo.
Ejemplos
- Cuadrícula básica de 3 columnas y 2 filas con 15 px de separación: escribe 3 en columnas, 2 en filas y 15 en el espaciado general para obtener repeat(3, 1fr) y repeat(2, auto).
- Diseño con barra lateral fija: introduce 250px 1fr en columnas, auto en filas, 0 en espaciado general y 20 en espaciado de columnas para generar grid-column-gap: 20px.
Preguntas frecuentes
¿Qué ocurre si escribo solo un número en las columnas?
El generador convierte el valor numérico en una regla con la función repeat(N, 1fr), distribuyendo el ancho disponible en partes iguales.
¿Puedo usar unidades distintas a los píxeles en los espaciados?
Los campos de espaciado aplican automáticamente la unidad en píxeles a los valores numéricos introducidos.
¿Es obligatorio rellenar todos los campos?
No, todos los parámetros son opcionales y disponen de valores iniciales predeterminados para generar una cuadrícula funcional de tres columnas.