Imagina una galería donde todas las celdas están pegadas entre sí, sin un solo píxel entre ellas, como si hubieran entrado en pánico colectivo. Técnicamente es un layout. Emocionalmente, es agobiante. Visualmente, parece un puzzle al que se le perdieron las líneas separadoras.
Aquí vuelve a salvarnos una propiedad maravillosa que ya conoces de Flexbox: gap.
gap también funciona en Grid (y aquí brilla aún más)En Flexbox, gap separa elementos en una dirección. En Grid, separa celdas en dos direcciones a la vez: añade espacio entre columnas y entre filas con una sola línea.
Eso significa que con un solo gap controlas todos los espacios interiores de la cuadrícula, sin tener que ir celda por celda como un jardinero recortando césped con tijeras.
Con esas cuatro líneas consigues:
gap: separa por dentro, no rompe por fueraEste detalle parece pequeño, pero en la práctica vale oro: gap crea espacio entre celdas, no alrededor del borde exterior del contenedor.
Eso significa que:
Si quieres aire en el interior del contenedor completo, eso ya es trabajo de padding. gap y padding no compiten: se reparten el trabajo.
gap también acepta dos valores. El primero es la separación entre filas, el segundo entre columnas:
Este truco es muy útil cuando quieres una cuadrícula compacta horizontalmente pero con más aire entre filas (típico en listas de tarjetas verticales).
También existen row-gap y column-gap por separado, aunque la mayoría de las veces gap te bastará:
No hace falta obsesionarse con memorizar las tres opciones hoy. Quédate con la idea importante: Grid te deja controlar el espacio como parte de la estructura, no como parche de última hora.
gap no parece gran cosa, pero es probablemente la propiedad que más limpia tu CSS cuando usas Grid o Flexbox. Antes, separar elementos significaba calcular márgenes, acordarse de quitarlos del primero o del último, y tener pesadillas con nth-child. Ahora es una sola línea, en el padre, y listo.
La diferencia entre un layout "ordenado" y uno "agradable" muchas veces es solo el espacio bien medido. Y gap es la herramienta perfecta para conseguirlo sin esfuerzo.
En proyectos reales, una cuadrícula básica suele empezar así:
Luego quizá cambies el número de columnas, el tamaño del gap o vuelvas la cuadrícula responsive. Pero la idea base casi siempre es esta: definir estructura y respiración en el contenedor padre.
Haz que .galeria-grid use Grid con dos columnas iguales (repeat(2, 1fr)) y un gap: 16px. Observa cómo las cuatro celdas se acomodan en una rejilla de 2x2 con espacio uniforme entre ellas.
La diferencia entre "ordenado" y "agradable" muchas veces es solo el espacio...