Cómo convertir la galería de Divi en un diseño Masonry estilo Pinterest

Si usas Divi en WordPress seguro que te has topado con el clásico problema de las galerías:
todas las imágenes se colocan en una cuadrícula rígida y, si tienes fotos apaisadas y retratos, el resultado puede quedar descompensado 😕.

Yo me encontré justo con esto creando una página para un cliente y decidí darle una vuelta: convertí la galería de Divi en un estilo Masonry (tipo Pinterest), sin usar plugins, solo con un poco de CSS.

Paso 1: Preparar la galería en Divi

Primero, añade el módulo de galería en modo cuadrícula (grid). Divi siempre genera un ul con clase .et_pb_gallery_items y dentro cada imagen como .et_pb_gallery_item.

No podemos cambiar ese HTML, pero sí podemos forzarlo con CSS a comportarse como un masonry.

Paso 2: CSS para el diseño Masonry

Aquí está el CSS que usé (y que puedes copiar/pegar en Divi > Opciones del tema > CSS personalizado o en el módulo de página):

/* Masonry para la galería de Divi */
.et_pb_gallery.gallery-masonry .et_pb_gallery_items {
  column-count: 3;        /* Número de columnas en escritorio */
  column-gap: 1em;        /* Espaciado entre columnas */
  display: block !important; /* Forzamos que sea compatible con Masonry */
}

.et_pb_gallery.gallery-masonry .et_pb_gallery_item {
  display: inline-block;  /* Necesario para que las columnas fluyan */
  width: 100%;            /* Que cada item ocupe su columna */
  margin: 0 0 1em;        /* Espacio inferior */
  break-inside: avoid;    /* Evita cortes raros */
}

/* Ajuste responsive */
@media (max-width: 991px) {
  .et_pb_gallery.gallery-masonry .et_pb_gallery_items {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  .et_pb_gallery.gallery-masonry .et_pb_gallery_items {
    column-count: 1;
  }
}

👉 Muy importante: asegúrate de añadir al módulo de galería la clase CSS personalizada gallery-masonry.

Paso 3: Resultado

Ahora las imágenes se ajustan de forma fluida, encajando unas con otras y respetando sus proporciones, sin necesidad de recortar ni deformar.

Es el mismo efecto que ves en Pinterest, pero dentro de Divi 🎉.

Ejemplo práctico

• Foto vertical (retrato) → ocupa una columna completa.
• Foto apaisada → se ajusta al ancho disponible, pero no obliga a las demás a tener la misma altura.

El resultado es una galería mucho más natural y estética.

---

✅ Con esto, ya no tienes que depender de plugins pesados ni de JavaScript adicional.

✅ Solo CSS puro, ligero y fácil de mantener.

✅ Y lo mejor: funciona tanto en escritorio como en móviles.

---

❓ FAQ

¿Divi incluye por defecto un diseño masonry para sus galerías?

No, Divi solo ofrece cuadrículas o slides. Para conseguir un diseño masonry es necesario añadir CSS personalizado.

¿Se puede hacer un masonry en Divi sin plugins?

Sí, con solo unas pocas líneas de CSS aplicadas al módulo de galería puedes conseguirlo, sin necesidad de instalar plugins extra.

¿El diseño masonry funciona en móviles?

Sí, con media queries puedes controlar el número de columnas y hacer que la galería se vea bien en cualquier dispositivo.