Introducción

En este tutorial vamos a ver, paso a paso y con todo lujo de detalles, cómo personalizar el footer de un tema de WordPress para conseguir columnas iguales y un espaciado consistente usando CSS Grid. Cubriremos el marcado PHP/HTML habitual en themes (tanto clásicos como block themes), registro de áreas de widgets, estilos CSS Grid prácticos, manejo de responsividad, alineado vertical, accesibilidad, compatibilidad y pequeñas rutinas para cargar estilos en WordPress.

Por qué usar CSS Grid en el footer

• Distribución precisa: Grid permite definir columnas iguales sin hacks complejos.
• Control del espaciado: la propiedad gap centraliza el control del espacio entre columnas y filas.
• Responsividad sencilla: con repeat(auto-fit / auto-fill) y minmax() conseguimos comportamientos fluidos.
• Alineado consistente: los items pueden estirarse para tener la misma altura visual, útil si ponemos fondos coloreados por columna.

Preparar el footer en WordPress (marcado y registro)

Primero necesitamos un markup coherente para el footer y, si usamos sidebars/widget areas, registrarlas en functions.php. A continuación tienes ejemplos mínimos para un theme clásico.

Registrar áreas de widget (functions.php)

// functions.php
function tema_registrar_sidebars() {
    register_sidebar(array(
        name          =gt Footer Columna 1,
        id            =gt footer-1,
        before_widget =gt ltdiv class=footer-columngt,
        after_widget  =gt lt/divgt,
        before_title  =gt lth4 class=widget-titlegt,
        after_title   =gt lt/h4gt
    ))
    register_sidebar(array(
        name =gt Footer Columna 2,
        id   =gt footer-2,
        before_widget =gt ltdiv class=footer-columngt,
        after_widget  =gt lt/divgt
    ))
    register_sidebar(array(
        name =gt Footer Columna 3,
        id   =gt footer-3,
        before_widget =gt ltdiv class=footer-columngt,
        after_widget  =gt lt/divgt
    ))
}
add_action(widgets_init, tema_registrar_sidebars)

Plantilla del footer (footer.php)

Un footer simple pero semántico. Observa cómo cada widget se coloca dentro de una columna para que Grid las gestione.

ltfooter class=site-footer role=contentinfogt
  ltdiv class=site-footer-innergt
    lt?php if ( is_active_sidebar( footer-1 ) ) { dynamic_sidebar( footer-1 ) } ?gt
    lt?php if ( is_active_sidebar( footer-2 ) ) { dynamic_sidebar( footer-2 ) } ?gt
    lt?php if ( is_active_sidebar( footer-3 ) ) { dynamic_sidebar( footer-3 ) } ?gt
  lt/divgt
  ltdiv class=site-footer-bottomgt
    ltpgtampcopy lt?php echo date(Y) ?gt lt?php bloginfo(name) ?gtlt/pgt
  lt/divgt
lt/footergt

CSS Grid: columnas iguales y espaciado

La pieza clave es aplicar Grid al contenedor que agrupa las columnas. El ejemplo siguiente crea columnas iguales, controla el espaciado con gap, y adapta automáticamente el número de columnas según el ancho disponible.

/ Estilos base del footer /
.site-footer {
  background: #222
  color: #eee
  padding: 2rem 1rem
  font-size: 0.95rem
}

/ Contenedor que será grid /
.site-footer-inner {
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
  gap: 1.5rem / controla el espaciado entre columnas /
  align-items: start / evita que títulos queden centrados si quieres comenzar en la misma línea /
  max-width: 1200px
  margin: 0 auto
}

/ Cada columna (widget) /
.footer-column {
  padding: 1rem
  / si quieres cada columna con fondo distinto o con borde: /
  / background: rgba(255,255,255,0.02) /
  / border-radius: 4px /
}

/ Si quieres que las cajas visuales tengan la misma altura, Grid estira por defecto
   pero al aplicar padding/ background la altura visual será consistente. /
.site-footer-inner gt .footer-column {
  display: block
}

/ Tip: espaciado interno y separación de títulos/listas /
.footer-column .widget-title {
  margin-top: 0
  margin-bottom: 0.75rem
  font-size: 1.05rem
}
.footer-column ul {
  margin: 0
  padding: 0
  list-style: none
}
.footer-column li {
  margin-bottom: 0.5rem
}

/ Footer bottom /
.site-footer-bottom {
  text-align: center
  margin-top: 1.5rem
  font-size: 0.9rem
  color: #bbb
}

Variantes: número fijo de columnas

Si necesitas exactamente 4 columnas iguales en pantallas grandes y un comportamiento diferente en móviles:

/ 4 columnas en escritorio /
.site-footer-inner {
  grid-template-columns: repeat(4, 1fr)
  gap: 2rem
}

/ En móviles, pasar a 1 columna /
@media (max-width: 700px) {
  .site-footer-inner {
    grid-template-columns: 1fr
    gap: 1rem
  }
}

Alineado vertical y columnas con fondo igual

Para que cada columna tenga un fondo que cubra la misma altura aunque el contenido sea desigual, lo importante es que el elemento que recibe el fondo sea el item directo del grid (no un hijo). Grid, por defecto, estira los items verticalmente (align-items: stretch). Ejemplo:

.site-footer-inner {
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
  gap: 1.5rem
  align-items: stretch / estira cada .footer-column a la misma altura en la fila /
}
.footer-column {
  background: #1b1b1b
  padding: 1.25rem
  border-radius: 6px
}

Footer creado con bloques (Gutenberg / FSE)

En los themes basados en bloques, el footer suele estar construido con bloques Columns. Los selectores cambian, pero el enfoque con Grid es similar. Ejemplo targeting de columnas de bloques:

/ Ejemplo para el markup de bloques: /
.wp-block-columns.is-layout-flex {
  display: grid / puedes forzar Grid si el markup usa flex /
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
  gap: 1.5rem
}

/ Columnas internas /
.wp-block-column {
  background: rgba(255,255,255,0.02)
  padding: 1rem
}

Encolar los estilos correctamente en WordPress

Evita poner CSS directo en header/footer y usa wp_enqueue_style o estilos en el archivo CSS principal del tema. Ejemplo mínimo para functions.php:

function tema_enqueue_styles() {
    wp_enqueue_style( tema-style, get_stylesheet_uri(), array(), wp_get_theme()-gtget(Version) )
    // Si tienes un archivo específico para footer:
    wp_enqueue_style( tema-footer, get_template_directory_uri() . /css/footer.css, array(tema-style), 1.0 )
}
add_action( wp_enqueue_scripts, tema_enqueue_styles )

Compatibilidad y fallback para navegadores antiguos

La mayoría de navegadores modernos soportan Grid. Si necesitas soporte para IE11, puedes:

• Proveer un fallback con Flexbox o floats que se cargue con una hoja condicionada o con @supports.
• Usar @supports para aplicar Grid solo donde esté disponible.

/ Fallback con @supports /
@supports (display: grid) {
  .site-footer-inner {
    display: grid
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
    gap: 1.5rem
  }
}
/ Si no hay soporte, usa flexbox /
@supports not (display: grid) {
  .site-footer-inner {
    display: flex
    flex-wrap: wrap
    gap: 1.5rem
  }
  .site-footer-inner gt .footer-column {
    flex: 1 1 220px
  }
}

Accesibilidad y buenas prácticas

• Usa roles semánticos: ltfooter role=contentinfogt y encabezados ordenados en cada columna.
• Contrastes de color adecuados para texto/links.
• Enlaces deben ser navegables con teclado y visibles al enfocarlos (outline/box-shadow claro).
• Evita depender solo de color para transmitir información.
• Si usas iconos, añade texto alternativo o ltspan class=screen-reader-textgt descriptivo.

Detalles y consejos avanzados

• Distribución dinámica según widgets activos: Si algunas columnas no están activas, Grid con auto-fit se ajusta para un control más fino puedes envolver solo los sidebars activos o generar clases con PHP según las áreas activas.
• Control fino del espaciado: gap define separación entre columnas y filas para un espaciado interior de cada columna usa padding en .footer-column.
• Tip de performance: coloca propiedades que no disparen repaint en animaciones (evita cambiar layout properties con JS en el scroll).
• Prueba con la herramienta DevTools: activa overlay de Grid para ver la malla y ajustar minmax() o gap hasta que quede exactamente como quieres.
• RTL: Grid funciona igual en RTL, pero revisa paddings/margins y direccionalidad de icons.

Ejemplo completo práctico

A continuación un ejemplo compacto que puedes adaptar directamente: marca el footer en footer.php, registra sidebars y añade el CSS en tu hoja de estilos.

lt!-- footer.php (fragmento) --gt
ltfooter class=site-footer role=contentinfogt
  ltdiv class=site-footer-innergt
    lt?php dynamic_sidebar( footer-1 ) ?gt
    lt?php dynamic_sidebar( footer-2 ) ?gt
    lt?php dynamic_sidebar( footer-3 ) ?gt
    lt?php dynamic_sidebar( footer-4 ) ?gt
  lt/divgt
  ltdiv class=site-footer-bottomgt
    ltpgtampcopy lt?php echo date(Y) ?gt Mi Sitiolt/pgt
  lt/divgt
lt/footergt

/ footer.css (compacto) /
.site-footer{background:#0f1720color:#e6eef8padding:2rem 1rem}
.site-footer-inner{max-width:1200pxmargin:0 autodisplay:gridgrid-template-columns:repeat(auto-fit,minmax(200px,1fr))gap:1.5remalign-items:stretch}
.footer-column{padding:1rembackground:rgba(255,255,255,0.03)border-radius:6px}
.site-footer-bottom{text-align:centermargin-top:1.25remcolor:#b7c6d6}

Comprobaciones finales antes de publicar

1. Ver que el footer se ve bien en móvil, tablet y escritorio.
2. Comprobar el contraste de colores y el foco en enlaces por teclado.
3. Probar con distintos contenidos en las columnas (listas largas, textos, formularios) para validar la estirada igual de alturas.
4. Revisar rendimiento y no duplicar reglas CSS innecesarias.

Recursos útiles

• MDN – Guía de CSS Grid
• MDN – Propiedad gap

Conclusión

CSS Grid simplifica enormemente la tarea de conseguir columnas iguales y un espaciado coherente en un footer de WordPress. Aplicando las técnicas de este tutorial tienes una solución robusta, accesible y responsive que funciona tanto en themes clásicos como en block themes. Ajusta minmax(), gap y grid-template-columns a tus necesidades para obtener el diseño perfecto.