Acerca de esta herramienta
El Generador de CSS Grid es una herramienta gratuita que se ejecuta en el navegador y convierte tres controles sencillos —número de columnas, número de filas y separación (gap)— en un diseño de cuadrícula CSS listo para pegar. Establece los valores, observa cómo se redibuja una vista previa en vivo y copia la regla generada.
Las columnas y filas son números enteros del 1 al 12 (3 y 2 de forma predeterminada), y la separación es un deslizador de 0 a 40 píxeles (10 de forma predeterminada). Ambas dimensiones se escriben con repeat() y la unidad 1fr, de modo que cada pista comparte por igual el espacio disponible. La vista previa rellena cada celda con un bloque numerado y de color para que veas la estructura de las pistas de un vistazo, y la salida es una regla .grid sencilla que usa display: grid, grid-template-columns, grid-template-rows y gap. Un solo clic la copia a tu portapapeles.
Todo se ejecuta por completo en tu navegador —sin subidas, sin cuentas, sin rastreo— y sigue funcionando sin conexión una vez cargada la página.