Introducción

Este tutorial explica, con todo lujo de detalles, cómo diseñar un layout de FAQs en WordPress a dos columnas utilizando CSS Grid con un gap correcto y comportamiento responsive. Cubre la estructura HTML recomendada, el CSS necesario para mantener separación homogénea entre filas y columnas, la accesibilidad básica y dos vías de integración en WordPress: un shortcode PHP y la inclusión directa en un bloque o plantilla.

Por qué usar CSS Grid para FAQs

CSS Grid permite controlar de forma consistente el número de columnas, el tamaño relativo de cada columna y los espacios entre filas y columnas mediante la propiedad gap. A diferencia de floats o columnas flex puras, Grid facilita mantener la alineación y los huecos iguales entre todos los elementos, incluso cuando las respuestas tienen diferente altura.

Consideraciones previas

• Semántica: usar elementos article o listas para los items de FAQ. Evitar estructuras puramente visuales sin semántica cuando sea posible.
• Accesibilidad: cada pregunta debe ser navegable por teclado y comunicar el estado (expandido/colapsado) mediante aria-expanded y aria-controls.
• Responsive: en pantallas pequeñas debe pasar a una sola columna (1fr) y ajustar el gap para ahorrar espacio.

Estructura HTML recomendada

Una estructura simple y semántica para un grid de FAQs es una lista de artículos donde cada artículo contiene la pregunta y la respuesta. Ejemplo de marcado que puedes usar tal cual dentro de una plantilla o como salida de un shortcode:

  

    
¿Cómo puedo instalar el plugin?
    
  

  

    
¿Se integra con mi tema?
    
  

  

CSS Grid: configuración básica y gap correcto

Recomendación base: usar gap para definir el espacio uniforme entre filas y columnas. Para dos columnas robustas y responsive:

/ Contenedor grid /
.faq-grid {
  display: grid
  grid-template-columns: repeat(2, minmax(0, 1fr)) / dos columnas iguales /
  gap: 24px / espacio homogéneo entre filas y columnas /
  align-items: start / hace que las cards no se estiren /
  margin: 0
  padding: 0
}

/ Elemento individual /
.faq-item {
  background: #ffffff
  border: 1px solid #e6e6e6
  padding: 18px
  border-radius: 6px
  box-shadow: 0 1px 3px rgba(0,0,0,0.04)
  display: flex
  flex-direction: column
}

/ Pregunta (se puede diseñar como botón visual) /
.faq-question {
  cursor: pointer
  margin: 0 0 12px 0
  font-size: 1rem
  line-height: 1.2
}

/ Respuesta /
.faq-answer {
  font-size: 0.95rem
  line-height: 1.5
}

/ Responsive: a una columna en móviles /
@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr
    gap: 16px
  }
}

Notas sobre gap:

• gap define automáticamente separación tanto en filas como en columnas. Si necesitas differentes valores usa row-gap y column-gap (o row-gap y column-gap en navegadores más antiguos que acepten la sintaxis).
• Evita usar márgenes verticales inconsistentes dentro de los items para no romper el espaciado uniforme controlado por Grid.
• Si quieres controlar separaciones distintas usa: column-gap: 24px row-gap: 20px

Comportamiento visual consistente con items de distinta altura

Para evitar que la altura desigual de respuestas descoloque el diseño, define align-items: start en el grid y usa display:flex en .faq-item para controlar el flujo interior. Esto mantiene las cabeceras alineadas arriba y las tarjetas con separación uniforme.

Interacción (toggling accesible)

Un pequeño script para alternar la visibilidad de la respuesta y actualizar atributos ARIA. Este código se puede añadir en un archivo JS o dentro del footer de la plantilla si corresponde:

document.querySelectorAll(.faq-question).forEach(function(q) {
  q.addEventListener(click, function() {
    var answer = document.getElementById(q.getAttribute(aria-controls))
    var expanded = q.getAttribute(aria-expanded) === true
    q.setAttribute(aria-expanded, String(!expanded))
    if (answer) {
      if (expanded) {
        answer.hidden = true
        answer.setAttribute(aria-hidden, true)
      } else {
        answer.hidden = false
        answer.setAttribute(aria-hidden, false)
      }
    }
  })

  q.addEventListener(keydown, function(e) {
    if (e.key === Enter  e.key ===  ) {
      e.preventDefault()
      q.click()
    }
  })
})

Integración en WordPress: Shortcode PHP

Si mantienes tus FAQs como un custom post type faq o como entradas con una categoría, puedes crear un shortcode que imprima la estructura anterior. Ejemplo simple de shortcode que consulta los posts faq y devuelve el grid:

function faq_two_column_shortcode(atts){
  args = array(
    post_type => faq,
    posts_per_page => -1,
    orderby => menu_order,
    order => ASC,
  )
  faqs = get_posts(args)
  if (empty(faqs)) {
    return 
No hay FAQs disponibles.
  }

  ob_start()
  ?>
  

    
      
ID) ?>>
        
ID) ?>
            aria-expanded=false
            aria-controls=faq-answer-ID) ?>
            tabindex=0>
          
        
        
ID) ?> hidden>
          post_content) ?>
        
      
    
  
  
Coloca este código en el archivo functions.php de tu tema hijo o en un plugin personalizado. Después usa el shortcode [faq_two_column] en la página deseada.
Alternativa: Bloque de Gutenberg

Si prefieres una solución sin código, crea un bloque reutilizable en Gutenberg que emita la misma estructura y añade el CSS en el archivo del bloque o en el Customizer → CSS adicional.
Para desarrollo avanzado, crea un bloque dinámico (server-side) que recupere los FAQs desde el CPT y renderice el HTML con el mismo CSS.

Mejores prácticas y trucos

Usa variables CSS para controlar gap y paddings, así puedes ajustar globalmente desde el root:
:root{
  --faq-gap: 24px
  --faq-padding: 18px
}
.faq-grid{ gap: var(--faq-gap) }
.faq-item{ padding: var(--faq-padding) }


Si el contenido de respuesta incluye imágenes o iframes, añade reglas de estilo para que no desborden y mantengan la caja (max-width:100% height:auto).
Evita usar márgenes verticales grandes entre elementos internos deja que Grid controle el espaciado exterior.
Comprueba en varios navegadores y en versiones antiguas de Safari/Edge gap en Grid tiene soporte amplio pero si necesitas compatibilidad muy antigua puedes usar fallback con márgenes en los items.

Problemas comunes y cómo resolverlos

Gaps distintos entre filas y columnas: revisa que no haya márgenes exteriores en los items que añadan separación extra. Usa gap como fuente única del espaciado.
Items desalineados verticalmente: añade align-items: start en el contenedor grid y usa display:flex dentro del item si necesitas que header y body se comporten consistentemente.
Columna extra en móvil: verifica media queries y que no haya un ancho mínimo (min-width) en los items que fuerce más columnas.

Consejos de rendimiento

Minimiza el número de consultas si generas el grid desde PHP cachea la salida del shortcode con transients si la lista de FAQs no cambia a menudo.
Evita cargar scripts pesados: el toggling mostrado es minimal y funciona sin librerías.
Coloca CSS en un archivo de temas o en la hoja principal para aprovechar caché del navegador en lugar de inyectarlo inline en cada página.

Resumen
Diseñar un layout de FAQs a dos columnas con grid y gap correcto es una solución moderna, accesible y fácil de mantener. Usa la estructura semántica propuesta, aplica gap para uniformidad, asegura un comportamiento responsive con media queries y añade atributos ARIA para accesibilidad. La integración en WordPress puede hacerse mediante shortcode o bloque, y el CSS y JS mostrados aquí son una base sólida para personalizar según el diseño del sitio.