Tutorial WordPress: Hacer columnas iguales en Gutenberg solo con CSS

Introducción

Este tutorial explica, con todo lujo de detalles, cómo conseguir columnas de igual altura en el editor de bloques Gutenberg usando únicamente CSS. No se necesitan plugins ni Javascript: aprovecharemos las clases que Gutenberg añade (.wp-block-columns y .wp-block-column) y técnicas CSS modernas (flexbox y grid) para lograr columnas visualmente equilibradas, con control de separaciones (gutter), alineado vertical del contenido y comportamiento responsivo.

¿Por qué las columnas no tienen la misma altura por defecto?

Gutenberg renderiza cada columna como un bloque independiente. Si el contenido de cada columna tiene distinta altura, el flujo normal del documento deja las columnas con alturas diferentes. Para igualarlas sin JS hay que usar un contenedor que alinee y estire sus hijos (flexbox o grid).

Resumen de enfoques válidos

Flexbox: simple y compatible usar display:flex en el contenedor y align-items:stretch en el eje cruzado.
CSS Grid: más control para diseños complejos (filas/columnas) y también estira celdas si se configura correctamente.
Soluciones híbridas: usar variables CSS para controlar gaps, min-height y alineados internos para centrar contenido.

Antes de empezar: selectores de Gutenberg

Gutenberg añade dos clases clave:

.wp-block-columns — el contenedor de las columnas.
.wp-block-column — cada columna individual.

Normalmente, el HTML que genera Gutenberg es similar a este (solo a modo ilustrativo):



  Contenido A
  Contenido B
  Contenido C

Solución recomendada: Flexbox (método simple y robusto)

Aplicar display:flex al contenedor y obligar a las columnas a estirarse hace que todas las columnas del mismo contenedor tengan la misma altura. Este enfoque funciona perfectamente para la mayoría de casos de uso.

CSS básico (flexbox)

/ Aplicar flex al contenedor de columnas /
.wp-block-columns {
  display: flex
  align-items: stretch    / IMPORTANTE: fuerza que las columnas se estiren a la misma altura /
  gap: 1.5rem             / espacio entre columnas usa gap si el theme lo soporta /
  flex-wrap: wrap         / permite que las columnas bajen a la siguiente fila en pantallas pequeñas /
}

/ Asegurar que las columnas ocupen su espacio natural y se puedan dimensionar /
.wp-block-column {
  flex: 1 1 0             / crecer y encoger base 0 para repartir el espacio /
  min-width: 0            / evita overflow por contenido largo /
  display: flex           / convertimos cada columna en contenedor flex para facilitar centrado vertical /
  flex-direction: column  / y así poder alinear el contenido dentro de la columna /
}

/ Opcional: centrar verticalmente el contenido dentro de cada columna /
.wp-block-column >  {
  flex: 0 0 auto          / los elementos interiores no se estiran por defecto /
}
.wp-block-column .centrar-vertical {
  margin-top: auto
  margin-bottom: auto
}

Explicaciones clave

align-items: stretch en el contenedor obliga a las columnas a tomar la misma altura del contenedor más alto.
flex: 1 1 0 en las columnas permite que se repartan el ancho libre y evita que el contenido desborde.
min-width: 0 evita que textos largos provoquen scroll horizontal inesperado dentro de la columna.
Convertir cada .wp-block-column en display:flex y flex-direction:column facilita centrar contenido verticalmente usando margin auto o align-items en el interior.

Control de separaciones (gutter) y compatibilidad

Si tu theme no admite gap en contenedores flex (navegadores antiguos), puedes simular la separación con márgenes negativos en el contenedor y márgenes en las columnas:

/ Fallback si gap no está soportado /
.wp-block-columns {
  display: flex
  align-items: stretch
  margin-left: -1rem / mitad del gutter negativo /
  margin-right: -1rem
  flex-wrap: wrap
}
.wp-block-column {
  padding-left: 1rem
  padding-right: 1rem
  box-sizing: border-box
}

Ejemplos específicos

Dos columnas iguales

/ Dos columnas a 50% con flexbox (funciona bien con .wp-block-column) /
.wp-block-columns.is-2-columns {
  display: flex
  gap: 1.5rem
}
.wp-block-columns.is-2-columns .wp-block-column {
  flex: 1 1 50%
}

Tres columnas iguales

/ Tres columnas: repartir en tercios /
.wp-block-columns.is-3-columns {
  display: flex
  gap: 1.5rem
}
.wp-block-columns.is-3-columns .wp-block-column {
  flex: 1 1 33.3333%
}

Alternativa: CSS Grid (cuando quieres más control de filas)

Grid es ideal si quieres controlar filas y columnas más explícitamente. Con grid, las celdas se estiran por defecto para igualar la altura de la fila.

/ Usando Grid para columnas iguales /
.wp-block-columns {
  display: grid
  grid-template-columns: repeat(3, 1fr) / ajustar según número de columnas /
  gap: 1.5rem
}
.wp-block-column {
  display: flex
  flex-direction: column / para facilitar alineación interna /
}

Responsive con grid

/ Regla responsive: en pantallas pequeñas pasar a una sola columna /
@media (max-width: 780px) {
  .wp-block-columns {
    grid-template-columns: 1fr
  }
}

Vertical align y centrar contenido dentro de cada columna

Si quieres que el contenido de las columnas esté centrado verticalmente (o alineado al final), convierte cada columna en un contenedor flex y usa las utilidades de margen o align-items:

/ Centrar verticalmente todos los elementos de una columna /
.wp-block-column {
  display: flex
  flex-direction: column
  justify-content: center / center, flex-start, flex-end según necesidad /
  padding: 1rem / guarda un padding para separación interna /
}

Cómo añadir este CSS en WordPress

Ir a Apariencia → Personalizar → CSS adicional y pegar el CSS (válido para cambios rápidos y testing).
O bien, si usas un tema hijo, añadir el CSS al archivo style.css del tema hijo.
Si prefieres añadirlo desde functions.php, puedes encolar un archivo CSS. Ejemplo de snippet para functions.php:

// functions.php (ejemplo para encolar un CSS personalizado)
function tema_hijo_enqueue_styles() {
  wp_enqueue_style( mi-estilos-columnas, get_stylesheet_directory_uri() . /css/columnas-iguales.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, tema_hijo_enqueue_styles )

Casos especiales y trucos avanzados

Columnas con contenido dinámico (imágenes y títulos): asegúrate de que las imágenes no impongan una altura fija. Usa max-width:100% y height:auto.
Columnas con fondo: si deseas que el fondo de cada columna cubra la misma altura, aplicar el fondo a .wp-block-column funcionará correctamente con flexbox/grid porque la columna tendrá la altura estirada.
Columnas por filas múltiples: si usas flex-wrap y hay más columnas de las que caben en una fila, cada fila puede tener distintas alturas según el contenido. Para forzar filas con alturas iguales entre filas necesitas grid o controlar el número exacto de columnas por fila.
Compatibilidad con editor block styles: algunos temas añaden estilos específicos a .wp-block-columns inspecciona con las herramientas de desarrollo y adapta tus selectores (usa mayor especificidad si hace falta).
Evitar romper el layout del editor: comprueba también en el editor (Gutenberg) visualmente, ya que algunos cambios CSS pueden afectar la vista en el editor. Si necesitas que el cambio solo aplique en el frontend, añade selectores que apunten exclusivamente al frontend (p. ej. body:not(.is-editor) .wp-block-columns) según sea necesario.

Depuración rápida: checklist

¿La regla .wp-block-columns tiene display:flex o display:grid aplicada? Si no, no habrá estirado.
¿align-items: stretch (flex) o altura natural de las celdas (grid) está presente? Es la clave para igual altura.
¿min-width:0 en .wp-block-column para evitar overflow con textos largos?
¿Hay reglas del tema que sobrescriban tus estilos? Usa inspector y, si es necesario, mayor especificidad o !important con cautela.

Conclusión

Con unas pocas reglas CSS —principalmente aplicar display:flex o display:grid al contenedor .wp-block-columns y forzar el estirado— puedes lograr columnas de igual altura en Gutenberg de forma limpia, sin Javascript ni plugins. Ajusta gap, breakpoints y alineado interno según tu diseño. La técnica es robusta y compatible con la mayoría de navegadores modernos.

Notas finales

Aplica estos fragmentos en tu CSS del tema o en CSS adicional. Inspecciona el DOM generado por Gutenberg en tu instalación para adaptar selectores si tu tema añade modificaciones específicas.

SushiHost