Introducción
En WordPress es habitual encontrarse con rejillas (grids) de bloques, tarjetas o columnas que contienen botones. Cuando el contenido de cada celda varía en longitud, los botones suelen quedar a alturas distintas y romper la homogeneidad visual. Este tutorial muestra, con todo lujo de detalles, cómo lograr que los botones ocupen el mismo alto dentro de una grid usando Flexbox, incluyendo soluciones específicas para Gutenberg (bloques de WordPress), recomendaciones de accesibilidad y dónde añadir el CSS en un tema o child theme.
Qué lograremos
- Botones con la misma altura en una grid de varias columnas.
- Botones alineados al fondo de tarjetas con contenido variable (layout tipo card).
- Soluciones aplicables a WordPress: bloque de columnas, bloque de botones, o grid personalizado.
- Cómo añadir el CSS al tema (Custom CSS, child theme o enqueue).
Concepto clave: Flexbox y la regla align-items: stretch
Flexbox tiene una ventaja clave: si un elemento contenedor es flex y sus hijos no tienen un tamaño fijo en el eje cruzado, se extienden para ocupar la misma altura si se usa align-items: stretch. Para forzar que el botón (o su contenedor) rellene verticalmente la celda, se suele aplicar display: flex al elemento que envuelve el botón y establecer que el botón tome todo el espacio disponible con flex: 1 o con reglas para estirado.
Escenario 1 — Grid simple (botón que ocupa toda la altura de su celda)
HTML de ejemplo para una grid de tres columnas (puedes usar este marcado en un bloque HTML del editor):
CSS usando Flexbox para que los botones tengan la misma altura en su celda:
.my-grid {
display: grid
grid-template-columns: repeat(3, 1fr)
gap: 1rem
}
/ Cada celda será un contenedor flex vertical /
.my-grid-item {
display: flex
flex-direction: column
padding: 1rem
border: 1px solid #e0e0e0
background: #fff
min-height: 220px / opcional: forzar una altura mínima coherente /
box-sizing: border-box
}
/ Esto empuja el contenido principal arriba y deja al botón en la parte inferior si usamos margin-top:auto,
pero para garantizar que el botón ocupe toda la anchura y tenga altura consistente usamos flex en el enlace /
.my-grid-item .btn {
display: inline-flex / permitimos centrar su contenido /
align-items: center
justify-content: center
margin-top: auto / empuja el botón al fondo de la tarjeta /
padding: 0.6rem 1rem
text-decoration: none
color: #fff
background: #0073aa
border-radius: 4px
min-height: 44px / altura accesible mínima /
box-sizing: border-box
/ Si queremos que la altura del botón sea exactamente la misma entre columnas,
hacer que el botón sea flexible dentro de su celda: /
flex-shrink: 0
}
/ Alternativa: forzar que el botón crezca para ocupar el espacio vertical disponible /
.my-grid-item .btn.stretch {
display: flex
flex: 0 0 auto / no crecer a expensas de todo, pero podemos fijar altura con min-height /
height: 48px
}
Notas: usar margin-top: auto en el botón hace que siempre quede pegado al fondo de la tarjeta combinar esto con una altura mínima consistente (min-height o height) garantiza uniformidad visual.
Escenario 2 — Múltiples botones en una fila dentro de columnas (igualar alto entre botones hermanos)
Si tienes varias columnas y en cada una hay un grupo de botones, puedes usar display:flex en el contenedor de botones para que los botones hermanos tengan la misma altura:
.card {
display: flex
flex-direction: column
height: 320px / ejemplo /
border: 1px solid #ddd
}
.card-actions {
display: flex
gap: 0.5rem
margin-top: auto / empuja las acciones al fondo /
}
/ Hacer que todos los botones compartan la misma altura y ocupen la misma proporción si queremos /
.card-actions .btn {
display: flex
align-items: center
justify-content: center
padding: 0.6rem 1rem
min-height: 44px
flex: 1 / cada botón ocupará el mismo ancho y la misma altura dentro del contenedor flex /
}
WordPress (Gutenberg) — ejemplos prácticos
En Gutenberg, los bloques estándar usan clases como .wp-block-column, .wp-block-buttons y .wp-block-button__link. Aquí tienes reglas específicas útiles para un layout de columnas en el editor de bloques:
/ Hacer que cada columna actúe como un contenedor flex vertical /
.wp-block-column {
display: flex
flex-direction: column
}
/ Empujar botones al fondo de la columna /
.wp-block-column .wp-block-button {
margin-top: auto
}
/ Forzar que el enlace del botón ocupe 100% de ancho y una altura mínima consistente /
.wp-block-column .wp-block-button__link {
display: inline-flex
align-items: center
justify-content: center
width: 100%
min-height: 44px
padding: 0.6rem 1rem
box-sizing: border-box
}
Si tu contenido usa el bloque Buttons dentro de varias columnas, las reglas anteriores aseguran que los botones se alineen al fondo y tengan la misma altura visual entre columnas.
Cómo añadir este CSS en WordPress
- Opción rápida: Personalizador → CSS adicional (Appearance → Customize → Additional CSS). Pega ahí tu CSS.
- Opción de tema hijo (recomendado para cambios persistentes): añade el CSS en style.css del child theme o encola un archivo CSS con functions.php del child theme.
Ejemplo de snippet para encolar un archivo CSS desde un child theme (functions.php):
function my_child_theme_enqueue_styles() {
wp_enqueue_style( my-child-styles, get_stylesheet_directory_uri() . /css/custom-grid-buttons.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, my_child_theme_enqueue_styles )
Consideraciones de accesibilidad
- Usa una altura mínima suficiente para facilidad de interacción táctil (44–48px recomendado).
- Si usas enlaces como botones (ltagt), asegúrate de que tengan un claro foco visible (outline) y atributos ARIA si su comportamiento no es el de navegar.
- Contraste de color adecuado entre texto y fondo para cumplir WCAG y facilitar lectura.
Responsive y breakpoints
En pantallas pequeñas probablemente quieras una sola columna asegúrate de que tu CSS sea adaptable. Ejemplo con media queries:
@media (max-width: 767px) {
.my-grid {
grid-template-columns: 1fr
}
/ En mobile puede que no haga falta margin-top:auto pero mantenlo para consistencia /
.my-grid-item .btn {
min-height: 48px
}
}
Soluciones alternativas
| Método | Pros | Contras |
|---|---|---|
| Flexbox (recomendado) | Flexible, sin JS, fácil de integrar en WordPress. | Requiere estructura HTML adecuada (contendedor por tarjeta/columna). |
| Establecer altura fija en botones | Sencillo de implementar. | Menos flexible problemas en pantallas pequeñas o con texto largo. |
| JavaScript para calcular alturas | Funciona en layouts complejos donde CSS no basta. | Añade complejidad, carga y dependencia a JS no ideal cuando CSS puede resolverlo. |
Ejemplo completo: tarjeta tipo catalog con botones iguales
Marcos combinando lo anterior — marcado y CSS listos para pegar en bloque HTML o en plantilla del theme:
.catalog-grid {
display: grid
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
gap: 1rem
}
.catalog-item {
display: flex
flex-direction: column
padding: 1rem
border: 1px solid #e6e6e6
background: #fff
box-sizing: border-box
min-height: 260px
}
.catalog-actions {
margin-top: auto / empuja las acciones al final de la tarjeta /
}
.catalog-actions .btn {
display: inline-flex
align-items: center
justify-content: center
width: 100%
min-height: 48px
padding: 0.6rem
text-decoration: none
color: #fff
background: #21759b
border-radius: 4px
}
Pruebas y depuración
- Inspecciona con las herramientas del navegador (DevTools) y asegúrate que .catalog-item sea display:flex y que el botón tenga margin-top:auto si necesitas que vaya al fondo.
- Deshabilita temporalmente margin-top:auto para ver cómo se comportan los elementos a menudo la causa de botones flotantes es la falta de un contenedor flex.
- En Gutenberg, recuerda que estilos en el editor pueden diferir de los estilos del frontend prueba en ambas vistas.
Resumen final
Para que los botones ocupen el mismo alto en una grid en WordPress la solución más robusta es usar Flexbox: convierte cada celda/columna/tarjeta en un contenedor flex vertical y usa margin-top: auto para empujar el botón al fondo o display:flex y flex:1 para que el botón llene su contenedor. Añade un min-height accesible para pantallas táctiles y coloca el CSS en el Customizer o en un child theme para que sea persistente. Esta aproximación evita JavaScript y funciona bien con Gutenberg si aplicas las reglas a las clases correctas (.wp-block-column, .wp-block-button__link, etc.).
Leave a Reply