Introducción

Crear una galería masonry sencilla con CSS columns es una forma rápida, ligera y compatible con navegadores modernos para mostrar imágenes en múltiples columnas con alturas variables. A diferencia de soluciones basadas en JavaScript, esta técnica aprovecha el flujo de columnas nativo del navegador, reduce la complejidad y mejora el rendimiento en proyectos WordPress cuando se necesita una galería visual atractiva y responsive.

Ventajas del enfoque con CSS columns

• Rendimiento: sin librerías externas, menos JavaScript.
• Simplicidad: estructura HTML mínima y estilos CSS claros.
• Compatibilidad: funciona en navegadores modernos y se adapta con media queries.
• Mantenimiento: fácil de integrar en temas o como shortcode/plugin en WordPress.

Limitaciones a tener en cuenta

• El orden del contenido fluye por columnas (de arriba abajo, luego siguiente columna). No es el mismo comportamiento que un masonry con posicionamiento absoluto.
• Los saltos de columna pueden requerir break-inside para evitar fragmentación de elementos.
• Control visual de filas uniforme (alinear a la misma altura) no es posible con columns sin recortar o manipular imágenes.

Estructura HTML recomendada

La estructura es muy sencilla: un contenedor que actúa como columna y dentro cada elemento de galería con su imagen y opcional pie de foto.

ltdiv class=masonry-gallerygt
  ltfigure class=masonry-itemgt
    ltimg src=ruta/a/imagen1.jpg alt=Descripción 1gt
    ltfigcaptiongtPie de foto 1lt/figcaptiongt
  lt/figuregt
  ltfigure class=masonry-itemgt
    ltimg src=ruta/a/imagen2.jpg alt=Descripción 2gt
    ltfigcaptiongtPie de foto 2lt/figcaptiongt
  lt/figuregt
  lt!-- repetir items --gt
lt/divgt

Notas sobre la galería en WordPress

1. En el editor de bloques puedes usar un bloque HTML personalizado e insertar el marcado anterior.
2. Para un uso repetido y limpio, es mejor crear un shortcode o una plantilla parcial en el tema.
3. Asegúrate de servir imágenes optimizadas (tamaños adecuados, WebP cuando sea posible) usando las funciones nativas de WordPress como wp_get_attachment_image_src y srcset.

CSS para crear el efecto masonry con columns

El truco es usar columns para establecer cuántas columnas y controlar el espacio entre ellas. Además necesitamos evitar que los elementos se rompan entre columnas usando break-inside.

/ Contenedor principal /
.masonry-gallery{
  column-count: 3               / número de columnas base /
  column-gap: 1rem             / espacio entre columnas /
  width: 100%
}

/ Cada elemento debe evitar romperse entre columnas /
.masonry-item{
  display: inline-block        / importante para que tome ancho de columna /
  width: 100%
  margin: 0 0 1rem             / espacio entre items vertical /
  break-inside: avoid          / evita fragmentación en columnas /
  -webkit-column-break-inside: avoid
  -moz-column-break-inside: avoid
  box-sizing: border-box
}

/ Imagen: ocupar todo el ancho del item manteniendo proporción /
.masonry-item img{
  display: block
  width: 100%
  height: auto
  border-radius: 4px
  object-fit: cover            / útil si fijas altura /
}

/ Pie de foto (opcional) /
.masonry-item figcaption{
  font-size: .9rem
  color: #444
  margin-top: .5rem
}

/ Ajustes responsive: reducir columnas en pantallas pequeñas /
@media (max-width: 900px){
  .masonry-gallery{ column-count: 2 }
}
@media (max-width: 600px){
  .masonry-gallery{ column-count: 1 }
}

Variaciones y ajustes

• Para control más estricto del ancho de cada columna puedes usar column-width en lugar de column-count:

/ Alternativa con column-width /
.masonry-gallery{
  column-width: 260px   / el navegador calculará cuántas caben /
  column-gap: 1rem
}

Integración en WordPress: crear un shortcode

A continuación un ejemplo de cómo crear un shortcode que reciba un array de IDs de adjuntos (attachments) y genere la galería. El código puede ponerse en el archivo functions.php del tema hijo o en un plugin personalizado.

/ Shortcode: [masonry_gallery ids=1,2,3,4] /
function mg_masonry_gallery_shortcode( atts ){
  atts = shortcode_atts( array(
    ids => ,
    class => ,
  ), atts, masonry_gallery )

  if( empty( atts[ids] ) ){
    return 
  }

  ids = array_map( trim, explode( ,, atts[ids] ) )
  output = ltdiv class=masonry-gallery  . esc_attr( atts[class] ) . gt

  foreach( ids as id ){
    id = intval( id )
    if( ! id ) continue

    img_src = wp_get_attachment_image_src( id, large )
    alt = get_post_meta( id, _wp_attachment_image_alt, true )
    caption = wp_get_attachment_caption( id )

    if( img_src ){
      output .= ltfigure class=masonry-itemgt
      output .= ltimg src= . esc_url( img_src[0] ) .  alt= . esc_attr( alt ) . gt
      if( caption ) {
        output .= ltfigcaptiongt . wp_kses_post( caption ) . lt/figcaptiongt
      }
      output .= lt/figuregt
    }
  }

  output .= lt/divgt
  return output
}
add_shortcode( masonry_gallery, mg_masonry_gallery_shortcode )

Encolar estilos desde WordPress

Es buena práctica encolar los estilos CSS con wp_enqueue_style para que se carguen correctamente y evitar duplicados.

/ Encolar CSS para la galería /
function mg_enqueue_masonry_gallery_styles(){
  wp_enqueue_style( mg-masonry-gallery, get_stylesheet_directory_uri() . /css/masonry-gallery.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, mg_enqueue_masonry_gallery_styles )

Opcional: lightbox simple con JavaScript

Si quieres abrir las imágenes en una vista ampliada, puedes añadir un lightbox ligero. A continuación un ejemplo muy simple. Para producción es recomendable usar una librería probada (p.ej. PhotoSwipe, GLightbox) por accesibilidad y funciones avanzadas.

/ Ejemplo básico: al hacer clic en la imagen muestra una capa con la imagen /
document.addEventListener(click, function(e){
  var el = e.target
  if( el.tagName === IMG  el.closest(.masonry-gallery) ){
    e.preventDefault()
    var overlay = document.createElement(div)
    overlay.style.position = fixed
    overlay.style.top = 0
    overlay.style.left = 0
    overlay.style.right = 0
    overlay.style.bottom = 0
    overlay.style.background = rgba(0,0,0,0.8)
    overlay.style.display = flex
    overlay.style.alignItems = center
    overlay.style.justifyContent = center
    overlay.style.zIndex = 9999
    var img = document.createElement(img)
    img.src = el.src
    img.style.maxWidth = 95%
    img.style.maxHeight = 95%
    img.style.boxShadow = 0 0 30px rgba(0,0,0,.5)
    overlay.appendChild(img)
    overlay.addEventListener(click, function(){ document.body.removeChild(overlay) })
    document.body.appendChild(overlay)
  }
})

Accesibilidad y SEO

• Siempre incluir atributo alt descriptivo en cada imagen.
• Usar figcaption para contenido contextual o textualmente relevante.
• Si implementas un lightbox, asegúrate de que sea accesible por teclado y que gestione el foco adecuadamente (aria-hidden, focus trapping).
• Implementar imágenes responsive con srcset y tamaños desde las funciones de WordPress para mejorar SEO y rendimiento.

Optimización y buenas prácticas

1. Servir imágenes optimizadas y en formatos modernos (WebP) cuando sea posible.
2. Usar Lazy Loading nativo (atributo loading=lazy) o una librería de lazy load para reducir carga inicial.
3. Evitar aplicar sombras o bordes pesados que generen repintado costoso en muchos elementos.
4. Probar la galería en distintos navegadores y tamaños, y ajustar column-gap y column-count según diseño.
5. Si necesitas control absoluto sobre el posicionamiento (columnas híbridas, orden complejo), considera usar Masonry JS o una librería con grid CSS y JS en lugar de columns.

Resolución de problemas comunes

• Espacios en blanco extra: Asegurarse de que .masonry-item tenga display:inline-block y margin-bottom para controlar separación vertical.
• Items cortados a la mitad: Añadir break-inside: avoid y prefijos para soporte en navegadores.
• Imágenes estiradas: Usar width:100% y height:auto para preservar proporción o usar object-fit si se fuerzan alturas.
• Orden inesperado: Recordar que columns llenan cada columna verticalmente si necesitas orden por filas, esta técnica no es la adecuada.

Conclusión práctica

La técnica masonry con CSS columns es ideal para galerías de imágenes en WordPress cuando buscas simplicidad, rapidez de implementación y buen rendimiento. Para integrarla de forma profesional en un sitio WordPress, crea un shortcode o plantilla, encola estilos y optimiza las imágenes con las herramientas nativas de WordPress. Si necesitas funcionalidades avanzadas (orden específico, animaciones complejas, mejor control del layout), valora combinar columns con JavaScript o pasarte a una solución de Masonry dedicada.