Elige pistas auto-fit o un número fijo de columnas y ajusta ancho mínimo, espacio, alineación y número de elementos: la vista previa es una cuadrícula real y el panel de salida muestra la regla completa que pegarías, de grid-template-columns a gap, align-items y justify-items.
Se ejecuta localmente en tu navegadorElige columnas fijas o una pista auto-fit, ajusta el ancho mínimo de tarjeta, el espacio y el número de elementos: la vista previa es una cuadrícula CSS Grid real y el panel de salida muestra la regla que pegarías (display: grid, grid-template-columns, gap, align-items y justify-items).
Los números de esta página están medidos, no copiados de la especificación. El banco arranca en auto-fit con 180 px de mínimo, 16 px de espacio y 8 elementos; con una ventana de 1360 px la vista previa mide 494 px y la misma cuadrícula pasó a 2 pistas con 180 px, 5 con 80 px y 1 con 600 px.
auto-fit escribe repeat(auto-fit, minmax(min(100%, 180px), 1fr)) —la guarda min(100%, …) evita que una pista desborde un contenedor más estrecho que el mínimo— y el modo fijo escribe repeat(4, minmax(0, 1fr)). La exportación incluye display: grid, gap, align-items y justify-items, así que el panel contiene una regla completa.
El ancho mínimo decide el número de columnas: medido en la vista previa de 494 px, 180 px dieron 2 pistas, 80 px dieron 5 y 600 px dejaron una sola. El espacio es un único valor para filas y columnas.
Los cuatro campos tienen límites duros: columnas 1-12, ancho mínimo 80-600 px, espacio 0-96 px, elementos 1-24. Escribir 20 columnas dibujaba 12 pistas mientras el campo seguía diciendo 20; ahora el campo se ajusta a 12 al confirmar, y 9999 → 600 px, 200 → 96 px y 30 → 24 elementos hacen lo mismo.
Los valores vacíos, no numéricos y decimales también entran en el rango: 3.7 pasa a 4, -5 pasa a 1 y un campo borrado vuelve al valor mínimo permitido. Mientras escribes, la vista previa sigue actualizándose pero el campo no se toca.
Escribe una regla de contenedor y un bloque de elementos de ejemplo, nada más: no hay áreas con nombre (grid-template-areas), ni colocación por elemento (span, row/column), ni auto-rows ni empaquetado denso, y las clases .grid / .grid__item son un esqueleto que debes renombrar.
Todo ocurre en la página: mientras se usaban los controles y se copiaba el código, el navegador no hizo ninguna petición. El mismo script también sirve a otros cuatro generadores (bezier, clamp, blurhash, gradient) y esas páginas quedaron idénticas; la de grid no desborda en horizontal a 320, 390, 768 ni 1360 px.