Generador de CSS Grid
Generador de CSS Grid: construye reglas grid-template y gap desde columnas, filas y separación.
Columnas, filas y separación
Indica entre 1 y 12 columnas, entre 1 y 12 filas y un gap de 0 a 200 píxeles. El resultado declara display: grid, reparte las columnas con repeat(n, 1fr), crea filas automáticas con repeat(n, auto) y añade la separación en píxeles.
Qué significa 1fr
Cada columna recibe una fracción igual del espacio disponible después de descontar el gap. Con tres columnas, las tres comparten la anchura del contenedor. Eso no fija un mínimo para el contenido: una palabra larga o una imagen puede forzar desbordamiento si no se controla.
Filas con altura automática
repeat(2, auto) crea dos pistas explícitas cuya altura depende de su contenido y del espacio disponible. Si colocas más elementos que celdas definidas, CSS Grid puede crear filas implícitas. La herramienta no añade grid-auto-rows ni reglas para ubicar elementos concretos.
Ejemplo de cuadrícula
Con 3 columnas, 2 filas y gap 16, se obtiene una base de seis celdas: grid-template-columns: repeat(3, 1fr), grid-template-rows: repeat(2, auto) y gap: 16px. Los hijos fluyen por el algoritmo normal del navegador.
Responsive y contenedor
El fragmento no define ancho, padding, media queries ni cambios de columna por pantalla. Para una galería adaptable, puedes sustituir la plantilla por repeat(auto-fit, minmax(...)) o cambiar n en una consulta. Comprueba también que el selector generado coincida con tu HTML.
Grid distribuye hijos directos del contenedor. Un elemento envuelto dentro de otro no ocupa una celda independiente salvo que cambies la estructura o uses subgrid donde sea compatible. Inspecciona el HTML antes de concluir que la plantilla falla, porque la relación padre-hijo determina qué cajas participan.
Las filas auto crecen con el contenido de su celda más alta. Si necesitas alturas iguales dentro de un contenedor fijo, define el espacio disponible y prueba unidades fr. Para tarjetas de texto variable, una altura forzada puede cortar contenido, así que comprueba el caso más largo.
Alinear contenido dentro de celdas
La plantilla crea pistas, pero no alinea el contenido internamente. Usa justify-items y align-items para todos los hijos, o justify-self y align-self en uno concreto. No confundas estas propiedades con justify-content y align-content, que distribuyen la cuadrícula completa cuando sobra espacio en el contenedor.
Fuentes y referencias
Continúa con estas herramientas
Preguntas frecuentes
¿Cuál es el máximo de columnas?
Doce. El mismo máximo se aplica a las filas solicitadas.
¿Puedo usar rem en el gap?
El formulario genera píxeles. Cambia manualmente la unidad en el CSS si tu escala usa rem.
¿1fr garantiza columnas idénticas?
Reparte el espacio flexible por igual, aunque el tamaño mínimo intrínseco del contenido puede influir.
¿Qué ocurre si añado más de seis elementos a una cuadrícula 3 × 2?
El navegador crea pistas implícitas para alojar los elementos adicionales.
¿Incluye puntos de ruptura para móvil?
No. Debes añadir media queries u otra estrategia responsive según el diseño.
¿El gap también separa el borde exterior?
No. Separa filas y columnas internas; el espacio respecto del contenedor se controla con padding.
Herramienta de OCC Tools