Generador de CSS Grid
Crea un diseño de CSS Grid visualmente con vista previa en vivo y copia el CSS de grid generado — define columnas, filas, tamaños de pista, espaciados y alineación.
El Generador de CSS Grid es una herramienta gratuita y visual para crear diseños con CSS Grid sin escribir código a mano. Define el número de columnas y filas, elige el tamaño de cada pista (fr, px, % o auto), ajusta el espaciado entre filas y columnas, y modifica cómo se alinean los elementos — y mira una cuadrícula de vista previa actualizarse en tiempo real. Cuando se vea bien, copia el CSS con display: grid generado y pégalo directamente en tu hoja de estilos.
¿Qué es un generador de CSS Grid?
CSS Grid es un sistema de diseño bidimensional que organiza los elementos en filas y columnas. Un generador de CSS Grid te ofrece controles deslizantes y selectores para las propiedades de la cuadrícula — grid-template-columns, grid-template-rows, gap, justify-items y align-items — y convierte tus elecciones en CSS listo para usar. En lugar de memorizar la sintaxis, ajustas los controles, ves el resultado al instante y copias el código.
Cómo usar el generador de CSS Grid
Crear un diseño en cuadrícula solo lleva unos pocos pasos:
- Define el número de columnas y filas que quieres.
- Elige un tamaño de pista para columnas y filas: fr (fracción flexible), px (fijo), % (porcentaje) o auto.
- Ajusta el espacio entre filas y el espacio entre columnas para añadir separación entre las celdas.
- Elige cómo se alinean los elementos de la cuadrícula con justify-items (horizontal) y align-items (vertical).
- Copia el CSS generado y aplícalo a tu elemento contenedor.
¿Qué significa fr en grid-template-columns?
La unidad fr representa una fracción del espacio libre disponible en el contenedor de la cuadrícula. repeat(3, 1fr) crea tres columnas que ocupan cada una una parte igual de la fila, creciendo y encogiéndose junto con el contenedor. Mezclar unidades es común en diseños reales — por ejemplo, una barra lateral fija en px junto a contenido flexible en fr — pero fr es la opción preferida para pistas responsivas y distribuidas de forma uniforme.
¿Cuál es la diferencia entre gap, justify-items y align-items?
gap controla el espaciado entre filas y columnas (puedes definir un solo valor o espacios separados para filas y columnas). justify-items posiciona cada elemento a lo largo del eje de la fila (inline) dentro de su celda, mientras que align-items lo posiciona a lo largo del eje de la columna (block). Configurar ambos como stretch llena la celda; start, center y end colocan el elemento sin estirarlo.
¿Por qué usar este generador de CSS Grid?
- 100% gratis, sin anuncios, registro ni límites.
- La cuadrícula de vista previa en vivo se actualiza al instante a medida que cambias cualquier ajuste.
- Genera un CSS limpio y estándar que puedes copiar con un clic.
- Admite tamaños de pista fr, px, % y auto, además de espacios separados para filas y columnas.
- Funciona por completo en tu navegador — no se sube nada.
- Ideal para aprender cómo las propiedades de CSS Grid afectan a un diseño.
Preguntas frecuentes
¿El generador de CSS Grid es gratis?
Sí. Todas las herramientas de ToolsSoup son completamente gratuitas, sin cuenta, registro ni límites ocultos.
¿El CSS generado funciona en todos los navegadores?
Sí. CSS Grid es compatible con todos los navegadores modernos, así que el código con display: grid que produce esta herramienta funciona en cualquier versión actual de Chrome, Firefox, Safari y Edge.
¿Puedo crear cuadrículas responsivas?
Usar la unidad fr hace que las columnas y filas sean flexibles para que se redimensionen con el contenedor. Para diseños específicos por breakpoint, copia la cuadrícula base de aquí y envuélvela en tus propias media queries.
¿Mis datos se suben a algún sitio?
No. El generador funciona por completo en tu navegador, así que nada de lo que configuras se envía ni se almacena en ningún servidor.