Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo diseñar columnas de altura igual y mantener un botón alineado al fondo de cada columna usando Flexbox en WordPress. Verás la idea general, cómo aplicarlo en un tema o en el editor de bloques (Gutenberg), ejemplos prácticos de HTML/CSS y cómo incluir la hoja de estilos desde functions.php. También cubro ajustes responsivos, accesibilidad y soluciones alternativas para navegadores antiguos.

Concepto y estrategia

El objetivo es que varias columnas dentro de un contenedor se vean con la misma altura visual aunque su contenido sea de distinta longitud, y que un botón (o CTA) dentro de cada columna quede pegado al borde inferior de la columna. La forma más limpia y moderna de lograr esto es combinar dos comportamientos de Flexbox:

• Contenedor de columnas como un flex row que estira las columnas a la misma altura.
• Cada columna como un flex column para poder empujar el botón hacia abajo con margin-top: auto o haciendo que un bloque intermedio crezca con flex: 1.

HTML recomendado (estructura semántica)

La estructura HTML que proponemos es simple y funciona tanto para plantillas como para bloques personalizados:

  

    

      
Título
      
Texto o contenido variable. Puede ser más o menos largo.
      Leer más
    
  

  

    

      
Título corto
      
Contenido más corto.
      Leer más
    
  

  

    

      
Otro título
      
Contenido intermedio.
      Leer más
    
  

CSS esencial (Flexbox)

Este CSS garantiza que las columnas tengan la misma altura y que el botón quede pegado abajo dentro de cada columna.

/ Contenedor principal: fila flexible /
.columns{
  display: flex
  gap: 1.5rem               / espacio entre columnas /
  align-items: stretch      / fuerza a las columnas a la misma altura /
}

/ Cada columna ocupa proporcionalmente el espacio disponible /
.column{
  flex: 1 1 0               / crecer y encoger igual — columnas de igual ancho /
  min-width: 0              / evita desbordes por contenido largo /
}

/ Convertimos la columna en un contenedor en columna para controlar posicionamiento interno /
.column__inner{
  display: flex
  flex-direction: column
  height: 100%              / asegurar que el inner herede la altura del .column /
  padding: 1.25rem
  background: #fff
  border: 1px solid #e0e0e0
  border-radius: 6px
  box-sizing: border-box
}

/ El contenido principal puede crecer para empujar al CTA abajo /
.column__text{
  margin: 0 0 1rem 0
  / si quieres que el contenido ocupe todo el espacio disponible: /
  / flex: 1 1 auto /
}

/ Método recomendado: dejar que el botón se pegue abajo con margin-top:auto /
.column__cta{
  display: inline-block
  margin-top: auto          / empuja el botón hacia abajo en el eje de columna /
  padding: 0.6rem 1rem
  background: #0073aa
  color: #fff
  text-decoration: none
  border-radius: 4px
  text-align: center
}

/ Estilo de la botonera para enfoque (accesibilidad) /
.column__cta:focus{
  outline: 3px solid #ffd54f
  outline-offset: 2px
}

Alternativa: usar un wrapper grow

Otra técnica es crear un bloque que crezca entre el contenido superior y el botón:

  
...
  
Contenido... que ocupa el espacio
  CTA

.column__content{
  flex: 1 1 auto  / este bloque crece, empujando el CTA al fondo /
}

Cómo implementarlo en WordPress

1. Editor de bloques (Gutenberg):
1. Crea un bloque de Columns o un Group con 3 bloques hijos.
2. En la barra lateral de configuración del bloque, asigna una clase CSS personalizada, por ejemplo custom-equal-columns.
3. Inserta el HTML interno (títulos, párrafos, enlaces). Para el botón, utiliza un bloque de botón o un bloque HTML personalizado con la clase column__cta.
4. Pega el CSS anterior en Apariencia → Personalizar → CSS adicional, o añádelo al style.css de tu child theme.
2. Plantilla PHP (tema o child theme): si generas columnas desde un loop o campos (ACF), asegúrate de la misma estructura de clases. Ejemplo de cómo encolar la hoja de estilo:

/ En functions.php del tema hijo /
function tema_hijo_enqueue_styles(){
  wp_enqueue_style(child-custom-columns, get_stylesheet_directory_uri() . /css/custom-columns.css, array(), 1.0)
}
add_action(wp_enqueue_scripts, tema_hijo_enqueue_styles)

Responsive: cómo actuar en móviles

En pantallas pequeñas habitualmente preferimos apilar columnas en una sola columna. Ajusta con media queries:

@media (max-width: 768px){
  .columns{
    flex-direction: column
  }

  .column{
    width: 100%
  }

  / En apilamiento, margin-top:auto sigue funcionando para mantener el botón al final de su columna /
}

Accesibilidad y buenas prácticas

• Usa etiquetas semánticas: ltarticlegt, lth3gt, ltpgt. Esto ayuda a lectores de pantalla y SEO.
• Prefiere botones reales para acciones (ltbuttongt) y enlaces para navegación (lta href=…). Si usas ltagt como botón, asegúrate de que el href sea válido y de proporcionar roles/atributos ARIA si corresponde.
• Define estilos de foco visibles (.column__cta:focus) para accesibilidad por teclado.
• Comprueba el contraste de colores del botón frente al fondo para cumplir WCAG.

Compatibilidad y soluciones para navegadores antiguos

Flexbox está ampliamente soportado en navegadores modernos. Si necesitas soporte para IE11, la mayoría de estas técnicas funcionan, pero cuidado con propiedades como gap en flex (no funciona en IE11). Para IE11 puedes usar margen separado o display:table/table-cell como fallback:

/ Fallback simple usando display:table (solo si debes soportar IE11) /
.columns-ie-fallback{
  display: table
  width: 100%
  table-layout: fixed
}

.columns-ie-fallback .column{
  display: table-cell
  vertical-align: top
}

Errores comunes y cómo resolverlos

• El botón no se pega abajo: comprueba que la columna interna sea un contenedor flex con flex-direction: column y que el botón tenga margin-top: auto o que exista un elemento intermedio con flex: 1.
• Columnas con alturas distintas: asegúrate de que el contenedor padre tenga align-items: stretch y que las columnas no tengan alturas fijas que impidan el estiramiento.
• Contenido desbordado: añade min-width: 0 en las columnas para evitar que contenido largo rompa el layout.
• Gaps que no funcionan en algunos navegadores: sustituye gap por margin en los hijos si necesitas compatibilidad total.

Ejemplo completo (HTML CSS breve)

Un ejemplo completo para copiar y adaptar en tu tema o bloque:

  

    

      
Plan Básico
      
Descripción corta del plan.
      Contratar
    
  

  

    

      
Plan Pro
      
Descripción más larga que ocupa más espacio, con características y beneficios detallados.
      Contratar
    
  

  

    

      
Plan Empresa
      
Descripción intermedia.
      Contratar
    
  

Resumen

Usando Flexbox en dos niveles —un contenedor horizontal que fuerza igual altura y columnas verticales con un elemento que crece o un botón con margin-top: auto— obtendrás un layout limpio, robusto y responsivo en WordPress. La implementación puede hacerse vía editor de bloques añadiendo clases personalizadas, o directamente en las plantillas del tema, y es compatible con la mayoría de navegadores modernos. Añade las consideraciones de accesibilidad y un fallback si necesitas soportar navegadores muy antiguos.