Tutorial WordPress: Crear una rejilla de comparativas con CSS Grid y auto-placement

Introducción

En este artículo se describe paso a paso cómo crear una rejilla de comparativas para WordPress aprovechando CSS Grid y su mecanismo de auto-placement. La solución que se muestra es flexible, responsive y pensada para integrarse en un tema o mediante un shortcode. Se incluyen ejemplos de HTML/PHP para generar las tarjetas de comparativa, el CSS para la rejilla y opciones avanzadas (enriquecimiento visual, densidad, ordenación y accesibilidad).

Por qué usar CSS Grid y auto-placement

CSS Grid permite definir rejillas bidimensionales con control preciso sobre filas y columnas. El auto-placement (grid-auto-flow, grid-auto-rows y grid-auto-columns) automatiza la colocación de los elementos y, combinado con la propiedad grid-auto-flow: dense, se logra que los elementos con distintos tamaños se empaqueten de forma eficiente rellenando huecos. Esto es ideal para paneles de comparativas donde algunas tarjetas pueden ocupar más espacio (destacadas) y otras menos.

Requisitos y idea general

WordPress 5.x o superior.
Acceso para editar el tema (child theme recomendado) o crear un plugin sencillo con un shortcode.
Opcional: Advanced Custom Fields (ACF) o un Custom Post Type para almacenar ítems de comparación.
CSS moderno (Grid). No se necesita librería externa para la rejilla básica.

Estructura HTML de la rejilla

La estructura base es una lista de tarjetas dentro de un contenedor que actúa como grid. Cada tarjeta puede tener una clase adicional para controlar su tamaño (por ejemplo, featured para tarjetas que ocupan más columnas).

ltdiv class=cmp-gridgt
  ltarticle class=cmp-cardgt
    ltheader class=cmp-card__headgtlth4gtPlan Básicolt/h4gtlt/headergt
    ltdiv class=cmp-card__bodygt
      ltpgtPrecio y características principales.lt/pgt
      ltulgt
        ltligt10 GBlt/ligt
        ltligtSoporte básicolt/ligt
      lt/ulgt
    lt/divgt
    ltfooter class=cmp-card__footgtlta href=#gtVer ofertalt/agtlt/footergt
  lt/articlegt

  ltarticle class=cmp-card featuredgt
    ltheader class=cmp-card__headgtlth4gtPlan Prolt/h4gtlt/headergt
    ltdiv class=cmp-card__bodygt
      ltpgtMayor rendimiento y soporte 24/7.lt/pgt
    lt/divgt
    ltfooter class=cmp-card__footgtlta href=#gtContratarlt/agtlt/footergt
  lt/articlegt

  lt!-- más tarjetas --gt
lt/divgt

CSS: Grid responsive con auto-placement

El siguiente CSS crea una rejilla fluida que se adapta al ancho disponible. Utiliza repeat(auto-fit, minmax()) para columnas dependientes del contenedor y grid-auto-flow: dense para un empaquetado más eficiente cuando hay elementos que ocupan varias columnas/filas.

/ Contenedor de la rejilla /
.cmp-grid {
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
  gap: 1rem
  align-items: start
  grid-auto-rows: minmax(120px, auto)
  grid-auto-flow: dense / intenta rellenar huecos /
}

/ Tarjeta base /
.cmp-card {
  background: #fff
  border: 1px solid #e6e6e6
  border-radius: 8px
  padding: 1rem
  box-shadow: 0 1px 4px rgba(0,0,0,0.04)
  display: flex
  flex-direction: column
}

/ Tarjeta destacada: ocupa 2 columnas en pantallas medianas  /
.cmp-card.featured {
  grid-column: span 2
}

/ Control más fino: permitir que una tarjeta ocupe 2 filas si es necesario /
.cmp-card.tall {
  grid-row: span 2
}

/ Ajustes para móviles: no forzar spans si la columna es 1 /
@media (max-width: 480px) {
  .cmp-card.featured { grid-column: auto grid-row: auto }
}

/ Encabezado y pie /
.cmp-card__head { margin-bottom: .5rem }
.cmp-card__foot { margin-top: auto }

/ Enlaces y botones /
.cmp-card a { color: #0073aa text-decoration: none font-weight: 600 }

Notas sobre comportamiento y trucos

grid-auto-flow: dense puede volver a ordenar visualmente los elementos para rellenar huecos esto afecta al orden visual pero no al orden del DOM, por lo que sigue siendo accesible para lectores de pantalla en el orden lógico del documento.
Si quieres preservar el orden visual siempre igual al DOM, no uses dense y controla los spans desde el backend.
Usa clases como featured o tall asignadas dinámicamente según reglas (por ejemplo, plan más vendido) para destacar items.

Generar la rejilla desde WordPress: ejemplo de shortcode

Un método cómodo es crear un shortcode que consulte un custom post type (por ejemplo, product o plan) y genere las tarjetas. A continuación un ejemplo mínimo para functions.php.

/
  Shortcode [cmp_grid]
  Querya posts de plan y genera la rejilla.
 /
function cmp_grid_shortcode( atts ) {
  atts = shortcode_atts( array(
    posts_per_page => 12,
  ), atts, cmp_grid )

  query = new WP_Query( array(
    post_type => plan,
    posts_per_page => intval( atts[posts_per_page] ),
    orderby => menu_order,
  ) )

  ob_start()
  if ( query->have_posts() ) {
    echo ltdiv class=cmp-gridgt
    while ( query->have_posts() ) {
      query->the_post()
      classes = cmp-card
      if ( get_field(destacado) ) { // ejemplo con ACF
        classes .=  featured
      }
      echo ltarticle class=. esc_attr(classes) .gt
      echo ltheader class=cmp-card__headgtlth4gt. get_the_title() .lt/h4gtlt/headergt
      echo ltdiv class=cmp-card__bodygt. wp_kses_post( wp_trim_words( get_the_content(), 25 ) ) .lt/divgt
      echo ltfooter class=cmp-card__footgtlta href=. esc_url( get_permalink() ) .gtMás infolt/agtlt/footergt
      echo lt/articlegt
    }
    echo lt/divgt
    wp_reset_postdata()
  } else {
    echo ltpgtNo hay planes para mostrar.lt/pgt
  }

  return ob_get_clean()
}
add_shortcode( cmp_grid, cmp_grid_shortcode )

Encolar el CSS desde functions.php

Es recomendable colocar el CSS en un archivo separado y encolarlo. Ejemplo de cómo registrar y encolar el CSS del grid.

function cmp_enqueue_styles() {
  wp_register_style( cmp-grid-styles, get_stylesheet_directory_uri() . /css/cmp-grid.css, array(), 1.0 )
  wp_enqueue_style( cmp-grid-styles )
}
add_action( wp_enqueue_scripts, cmp_enqueue_styles )

Tabla de propiedades clave

Propiedad	Descripción
grid-template-columns	Define las columnas de la rejilla. repeat(auto-fit/minmax) permite que la rejilla sea fluida y responsive.
grid-auto-rows	Establece la altura mínima de las filas útil para controlar la altura base de las tarjetas.
grid-auto-flow	Controla el algoritmo de auto-placement. El valor dense rellena huecos con elementos más pequeños cuando es posible.
grid-column / grid-row	Permiten que un elemento ocupe varias columnas o filas (por ejemplo, grid-column: span 2).

Ejemplos avanzados

Filtrado dinámico y reordenado visual mediante JavaScript. Aquí un ejemplo simple para filtrar tarjetas por categoría (clases CSS) sin recargar la página.

// Botones con data-filter=.categoria-x o all
document.addEventListener(click, function(e){
  const btn = e.target.closest([data-filter])
  if (!btn) return
  const filter = btn.getAttribute(data-filter)
  const items = document.querySelectorAll(.cmp-card)
  items.forEach(item => {
    if (filter === all) {
      item.style.display = 
    } else {
      item.style.display = item.matches(filter) ?  : none
    }
  })
})

Accesibilidad y SEO

Usa elementos semánticos: ltarticlegt para tarjetas, ltheadergt y ltfootergt dentro de cada tarjeta.
El orden del DOM debe reflejar la prioridad lógica (nombre, precio, CTA). CSS Grid solo cambia la presentación, no el orden semántico.
Asegura suficiente contraste en los botones y links.
Incluye atributos alt en imágenes y roles ARIA si añades controles interactivos complejos.

Problemas comunes y soluciones

Huecos inesperados: revisa si algún elemento tiene grid-column o grid-row que fuerza un span demasiado grande elimina dense si no deseas reordenado.
Tarjetas con altura variable que desalinean visualmente: usa display:flex flex-direction:column en las tarjetas y margin-top:auto en el footer para empujar CTAs al fondo.
Rejilla no responsive: asegúrate de usar minmax() y media queries para ajustar spans en móvil.

Optimización estética

Utiliza variables CSS para controlar colores, radios y gaps, facilitando la personalización por el tema.
Añade transiciones suaves en hover sobre las tarjetas para mejorar la experiencia.
Piensa en versiones de imagen optimizadas (srcset) si cada tarjeta incluye ilustraciones.

Resumen

CSS Grid con auto-placement proporciona una solución potente y elegante para crear rejillas de comparativas en WordPress. Combinando un shortcode/PHP para generar tarjetas dinámicamente, un CSS responsivo y pequeños scripts para interactividad, obtendrás una sección de comparativas versátil, accesible y fácil de mantener. Las opciones avanzadas (spans, dense, filtros) permiten adaptar el layout a necesidades concretas, siempre manteniendo el contenido semántico en el DOM.

SushiHost