Tutorial WordPress: Pasar de tres a una columna en móvil con CSS Grid auto-fit

Introducción

En este tutorial detallado veremos cómo pasar una cuadrícula de tres columnas a una sola columna en dispositivos móviles utilizando CSS Grid con la técnica repeat(auto-fit, minmax(…)). Aplicaremos la solución a un entorno WordPress, indicando dónde colocar el CSS (Custom CSS, child theme o enqueue) y mostrando ejemplos concretos del marcado del bucle (loop) y del CSS necesario. También explico por qué funciona auto-fit frente a auto-fill, cómo elegir los valores de minmax para controlar el comportamiento y soluciones para casos comunes (márgenes, imágenes, orden visual, y compatibilidad).

Conceptos clave

CSS Grid: sistema bidimensional para distribuir elementos en filas y columnas.
repeat(auto-fit, minmax(min, max)): crea tantas columnas como quepan cada columna tendrá un ancho entre min y max.
auto-fit vs auto-fill: auto-fit colapsa columnas vacías y permite que los elementos ocupen todo el ancho disponible auto-fill reserva el hueco aunque esté vacío.
Responsive natural: con minmax y auto-fit la cuadrícula puede reducir automáticamente el número de columnas sin media queries. Para forzar una sola columna en móvil también se puede usar una media query o cambiar el min del minmax.

Preparar el HTML en WordPress (ejemplo del loop)

En un tema típico de WordPress, la cuadrícula contendrá las entradas (posts) dentro de un contenedor. Un ejemplo simplificado del loop dentro de un archivo de plantilla:

ltdiv class=posts-gridgt
  ltarticle class=post-itemgt...lt/articlegt
  ltarticle class=post-itemgt...lt/articlegt
  ltarticle class=post-itemgt...lt/articlegt
  lt!-- más .post-item --gt
lt/divgt

Si usas el editor de bloques (Gutenberg), añade una clase CSS a la fila de columnas o al bloque que envuelve las tarjetas para aplicar la misma lógica.

Ejemplo CSS: tres columnas en escritorio y una columna en móvil con auto-fit

Este CSS usa auto-fit y minmax para crear columnas que ocupan desde 260px hasta 1fr, lo que normalmente da 3 columnas en pantallas anchas y las reduce automáticamente cuando el ancho disponible no alcanza para 3. Si quieres forzar exactamente una columna por debajo de cierto ancho (por ejemplo 640px), se puede añadir una media query.

/ Contenedor grid /
.posts-grid {
  display: grid
  gap: 1.25rem / separación entre tarjetas /
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
  align-items: start
  margin: 0 auto
  padding: 0 1rem
  box-sizing: border-box
}

/ Opcional: estilo base de cada tarjeta/post /
.post-item {
  background: #fff
  border: 1px solid rgba(0,0,0,0.06)
  padding: 1rem
  display: flex
  flex-direction: column
  min-height: 100px
}

/ Ajustes para imágenes responsivas dentro de las tarjetas /
.post-item img {
  max-width: 100%
  height: auto
  display: block
}

Para forzar una columna en móvil (media query)

Si prefieres asegurar que en pantallas pequeñas sea exactamente una columna, añade una media query que cambie grid-template-columns a 1fr por debajo de tu breakpoint elegido:

/ Forzar 1 columna en pantallas pequeñas /
@media (max-width: 640px) {
  .posts-grid {
    grid-template-columns: 1fr
    gap: 1rem / opcional: ajustar separación en móvil /
  }
}

Por qué elegir auto-fit con minmax para este caso

Flexibilidad: Las columnas se ajustan automáticamente a la anchura disponible sin necesidad de cambiar el número de columnas manualmente.
Control mínimo-máximo: minmax permite definir el tamaño mínimo de una tarjeta antes de que tenga que colapsar a la siguiente fila así controlas cuándo baja de 3 a 2 y de 2 a 1.
Compatibilidad: CSS Grid está ampliamente soportado en navegadores modernos. Para navegadores muy antiguos puedes usar un fallback con flexbox o un diseño de listas.

Elegir los valores de minmax

Cómo determinar el valor mínimo (ej. 260px)

Considera el contenido: si la tarjeta necesita espacio para imagen título extracto, mide el ancho mínimo cómodo para legibilidad.
Prueba con 220–320px para tarjetas tipo blog valores más bajos reducen la legibilidad, valores más altos harán que la cuadrícula caiga a menos columnas antes.
Si quieres que haya exactamente tres columnas en escritorio en un contenedor de 1200px con gaps, calcula 1200 / 3 y ajusta teniendo en cuenta padding y gap.

Cómo añadir este CSS en WordPress

Opción rápida: Apariencia gt Personalizar gt CSS adicional. Pega el CSS ahí y guarda.
Opción de tema hijo (recomendada): Crea o edita style.css del child theme y añade el CSS. Para asegurar carga correcta, en functions.php del child theme encola las hojas.

/ Enqueue del style.css del child theme /
function mi_tema_hijo_styles() {
    wp_enqueue_style( mi-theme-child-style, get_stylesheet_uri(), array(parent-style-handle), wp_get_theme()->get(Version) )
}
add_action( wp_enqueue_scripts, mi_tema_hijo_styles )

Si prefieres añadir un archivo CSS específico (por ejemplo assets/css/grid.css), encola ese archivo:

function mi_grid_custom_styles() {
    wp_enqueue_style( mi-grid-css, get_stylesheet_directory_uri() . /assets/css/grid.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, mi_grid_custom_styles )

Consideraciones de accesibilidad y experiencia

Asegúrate de que el orden visual coincida con el orden DOM si importa para lectores de pantalla. Grid respeta el flujo por defecto evita reordenar elementos con grid-area si no controlas el tab-order.
Comprueba el contraste, tamaños táctiles y el espaciado en móvil para evitar toques fallidos.
Las imágenes deben usar srcset y tamaños para optimizar carga en móviles.

Compatibilidad y fallback

CSS Grid funciona en la mayoría de navegadores modernos. Para navegadores antiguos o escenarios donde necesites mayor compatibilidad, añade un fallback con display:flex o con un layout basado en floats para que el diseño no rompa:

/ Fallback simple con flexbox: se aplica en navegadores que no soportan grid (se declara primero grid y luego flex funciona como fallback en algunos casos) /
.posts-grid {
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
  gap: 1.25rem
}

/ Fallback: si decides añadir una clase .no-grid en  vía script o Modernizr, puedes usar: /
.no-grid .posts-grid {
  display: flex
  flex-wrap: wrap
  gap: 1.25rem
}
.no-grid .post-item {
  flex: 1 1 260px / ancho base similar al minmax minimo /
  max-width: calc(33.333% - 0.83rem) / intenta replicar 3 columnas /
}

Problemas frecuentes y solución

Las columnas nunca se reducen a 1: revisa el valor mínimo de minmax si es demasiado pequeño puede mantener varias columnas. Si quieres forzar 1 en móvil, añade la media query.
Desbordamiento horizontal en móvil: revisa márgenes, padding y el ancho de imágenes usa box-sizing: border-box y img { max-width:100% }
Gap demasiado grande en móvil: ajusta gap dentro de la media query para pantallas pequeñas.
Widgets o sidebars interfieren: asegúrate de aplicar las reglas solo al contenedor correcto (.posts-grid) y que no haya estilos heredados que fijen anchos.

Ejemplo completo práctico

HTML simplificado (loop) y CSS juntos — en una página de archivo o plantilla de blog:

ltsection class=posts-archivegt
  ltdiv class=posts-gridgt
    ltarticle class=post-itemgt
      ltimg src=imagen.jpg alt=Descripción /gt
      lth3gtTítulo del postlt/h3gt
      ltpgtExtracto o resumen...lt/pgt
    lt/articlegt
    lt!-- repetir .post-item --gt
  lt/divgt
lt/sectiongt

.posts-grid {
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
  gap: 1.5rem
  margin: 0 auto
}

/ 1 columna segura en móviles /
@media (max-width: 640px) {
  .posts-grid {
    grid-template-columns: 1fr
    gap: 1rem
  }
}

Conclusión práctica

Usar repeat(auto-fit, minmax(…)) es una solución potente para conseguir que una cuadrícula que en escritorio muestra tres columnas pase a menos columnas en pantallas más pequeñas de forma fluida. Para asegurar una única columna en móviles, añade una media query en torno a 640px (o el breakpoint que uses). En WordPress puedes añadir el CSS desde el Personalizador o mediante un child theme y encolar los estilos en functions.php. Con esto obtendrás una solución responsive, eficiente y fácil de mantener.

SushiHost