Tutorial WordPress: Crear un layout de dos columnas con CSS Grid sin bloque columnas

Introducción

En este tutorial detallado aprenderás a crear un layout de dos columnas en WordPress usando CSS Grid, sin recurrir al bloque de Columnas del editor de bloques. La técnica consiste en envolver el contenido en un bloque contenedor (por ejemplo, un Group block) y aplicar una clase CSS propia que convierta ese contenedor en una grid de dos columnas. Esta aproximación ofrece control total sobre tamaños, separación, orden y comportamiento responsive, evitando las limitaciones y markup generados por el bloque Columns cuando no quieres depender de él.

Por qué no usar el bloque Columns

El bloque Columns genera markup y estilos predefinidos que a veces dificultan la personalización fina.
CSS Grid permite mayor control semántico y layout más complejo con menos HTML.
Facilita crear variantes como columnas asimétricas, sidebar sticky, o reordenado en móvil de forma sencilla.

Concepto y preparación en el editor

La idea es simple: en el editor de bloques, en lugar de insertar un bloque Columns, inserta un Group (o Container) y dentro coloca dos bloques Group (o cualquier bloque) que actuarán como columna izquierda y columna derecha. Asigna al contenedor principal una clase CSS personalizada, por ejemplo grid-dos-columnas, desde la opción Advanced → Additional CSS class(es).

Paso a paso en el editor

Inserta un bloque Group (será el contenedor principal).
Dentro del Group añade dos bloques Group (o bloques de tipo Paragraph, Image, etc.). Uno será la columna izquierda y el otro la columna derecha.
Selecciona el Group principal y en Advanced → Additional CSS class(es) escribe: grid-dos-columnas.
Guarda y añade el CSS que mostramos abajo en el style.css del tema o en Apariencia → Personalizar → CSS adicional.

CSS básico para dos columnas iguales

Este CSS convierte el contenedor en un grid de dos columnas iguales, con control del espacio entre columnas y comportamiento responsive para apilar en pantallas pequeñas.

.grid-dos-columnas {
  display: grid
  grid-template-columns: repeat(2, minmax(0, 1fr)) / dos columnas iguales /
  gap: 1.5rem / espacio entre columnas y filas /
  align-items: start / alinear contenido al inicio verticalmente /
}

/ Responsive: apilar en una columna a partir de cierto punto /
@media (max-width: 780px) {
  .grid-dos-columnas {
    grid-template-columns: 1fr
  }
}

Explicación de propiedades clave

display: grid activa Grid Layout en el contenedor.
grid-template-columns: define el número y tamaño de columnas. Usamos minmax(0, 1fr) para evitar problemas de overflow con contenido ancho.
gap: controla tanto columnas como filas (espacio entre elementos de la grid).
La media query controla el comportamiento en pantallas pequeñas para apilar las columnas y mejorar usabilidad en móviles.

Variantes útiles

Columna principal sidebar (asimétrica)

Si quieres que la columna izquierda ocupe más espacio que la derecha (por ejemplo 2/3 1/3):

.grid-dos-columnas--main-sidebar {
  display: grid
  grid-template-columns: 2fr 1fr / izquierda más ancha, derecha sidebar /
  gap: 2rem
  align-items: start
}

@media (max-width: 800px) {
  .grid-dos-columnas--main-sidebar {
    grid-template-columns: 1fr / apilar en móvil /
  }
}

Reordenar columnas en móvil (poner sidebar arriba)

Si deseas que en móvil el sidebar aparezca antes que el contenido principal, asigna clases a las columnas y usa order o grid-row:

.grid-dos-columnas--reorder > .col-main {
  / nada especial en escritorio /
}
.grid-dos-columnas--reorder > .col-side {
  / nada especial en escritorio /
}

@media (max-width: 800px) {
  .grid-dos-columnas--reorder {
    grid-template-columns: 1fr
  }
  .grid-dos-columnas--reorder > .col-side {
    order: -1 / mueve el sidebar arriba /
  }
}

Sidebar sticky (fijo en el scroll dentro de la columna)

Para que la columna derecha quede fija en la pantalla mientras la principal se desplaza:

.grid-dos-columnas--sticky .col-side {
  position: sticky
  top: 1rem / separación desde la parte superior de la ventana /
  align-self: start / para que el sticky funcione correctamente /
}

Ejemplo de marcado que genera WordPress (para referencia)

En el editor, si usas Group blocks, el HTML resultante suele ser algo como esto. No es necesario insertar este HTML manualmente en WordPress se muestra aquí para que veas las clases y estructura a las que aplicar CSS.



  
  
    
    
    Contenido principal...
    
  
  

  
  
    
    
    Contenido del sidebar...

Cómo añadir este CSS a tu tema WordPress

Opción rápida: copia el CSS en Apariencia → Personalizar → CSS adicional.
Opción de tema: añade el CSS a style.css del tema hijo para mantenerlo seguro ante actualizaciones.
Si prefieres cargar un archivo CSS propio desde functions.php, aquí tienes un ejemplo mínimo para enqueue:

/ functions.php (tema hijo) /
function tema_hijo_enqueue_grid_dos_columnas() {
  wp_enqueue_style( grid-dos-columnas, get_stylesheet_directory_uri() . /css/grid-dos-columnas.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, tema_hijo_enqueue_grid_dos_columnas )

Consideraciones de accesibilidad y SEO

Asegúrate de mantener el orden lógico del DOM: el contenido principal debe ir antes del sidebar si tiene más relevancia semántica, incluso si luego lo reordenas visualmente con CSS.
Usa encabezados (h2, h3) y listas correctamente dentro de cada columna para mantener la jerarquía y accesibilidad.
Comprueba el contraste de colores, especialmente si aplicas fondos distintos a cada columna.

Compatibilidad y fallback

CSS Grid está ampliamente soportado en navegadores modernos. Si necesitas compatibilidad con navegadores muy antiguos, puedes ofrecer un fallback simple usando display:flex o dejar el contenido en flujo normal (apilado). Un ejemplo de fallback sería encadenar un display:flex antes del display:grid:

/ Fallback básico: flex que se activará en navegadores que no soporten grid /
.grid-dos-columnas {
  display: flex
  flex-wrap: wrap
  gap: 1.5rem
}
.grid-dos-columnas >  {
  flex: 1 1 100% / por defecto apilado en móviles / fallback /
}

/ Luego la regla grid (sobrescribe en navegadores con soporte) /
.grid-dos-columnas {
  display: grid
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

Buenas prácticas y optimizaciones

Usa variables CSS para controlar gap y puntos de quiebre, así puedes ajustar el tema de forma centralizada.
Evita aplicar estilos directos en los bloques hijos que puedan romper el flujo (por ejemplo, anchos fijos que generen overflow).
Prueba con contenido real (imágenes, iframes, tablas) para asegurarte de que no se generan desbordamientos inesperados.
Si necesitas controlar áreas más complejas, considera usar grid-template-areas para asignar zonas explícitas.

Resumen práctico

Crear un layout de dos columnas con CSS Grid en WordPress sin usar el bloque Columns es una solución flexible y moderna. Solo necesitas:

Un contenedor (Group block) con una clase CSS personalizada, por ejemplo grid-dos-columnas.
Dos bloques hijos que actúen como columnas.
Agregar el CSS que convierte el contenedor en grid y controle responsive, gaps, orden y cualquier comportamiento extra (sticky, asimetría).

Con estas piezas podrás adaptar fácilmente el diseño a distintas necesidades (sidebar, layout simétrico o asimétrico, reordenado móvil), manteniendo control semántico y rendimiento.

SushiHost