Cómo agregar 7 o más columnas en Divi (con CSS)

Un problema bastante común entre nuestros suscriptores: necesitas mostrar una fila de logos de clientes, íconos de tecnologías o sellos de confianza — y son 8. Pero Divi permite un máximo de 6 columnas por fila. ¿La solución de muchos? Partir el contenido en dos filas que nunca se alinean bien, o renunciar al diseño. Hay una salida mucho más elegante: convertir una columna en un grid de CSS con el número exacto de columnas que necesites.

En este tutorial te muestro la técnica completa: el snippet de CSS Grid, dónde pegarlo exactamente en Divi, cómo hacerlo responsive para tablet y móvil, y los errores típicos que hacen que "no funcione" la primera vez. Soy Jefferson Maldonado y esta es una de las técnicas que más repito en proyectos reales — vale la pena dominarla.

Aprende a manejar CSS con criterio profesional en nuestro curso profesional de desarrollo HTML y CSS — la base que hace que técnicas como esta dejen de ser magia y se vuelvan herramienta.

El resultado que vamos a construir:

La idea: una columna que se comporta como ocho

El truco no es "hackear" el sistema de filas de Divi, sino usar CSS Grid sobre una sola columna. El flujo es:

1. Creas una fila normal de una sola columna.
2. Dentro de esa columna, agregas todos los elementos (imágenes, íconos, módulos de texto) uno debajo del otro.
3. Con tres líneas de CSS, conviertes esa columna en un grid horizontal con las columnas que quieras: 7, 8, 10 — el límite lo pones tú.

La ventaja de este enfoque es que los elementos siguen siendo módulos normales de Divi: puedes editarlos, duplicarlos y estilizarlos con el constructor visual de siempre. El CSS solo cambia cómo se distribuyen.

Paso 1: configurar la fila inicial

En tu página, agrega una nueva fila de una columna. Dentro, coloca todos los elementos que quieras distribuir — para el ejemplo clásico de logos de marcas, serían 8 módulos de imagen, uno debajo del otro. No te preocupes porque se vean apilados verticalmente: eso lo arregla el grid en el siguiente paso.

Consejo: usa elementos del mismo tipo y proporciones similares (todos los logos a la misma altura, por ejemplo). Un grid distribuye el espacio equitativamente, pero no iguala el contenido — si un logo es el doble de alto que los demás, se notará.

Paso 2: aplicar el CSS Grid a la columna

Ahora viene la transformación. Abre la configuración de la columna (no de la fila ni de los módulos), ve a la pestaña Avanzado → CSS personalizado → Elemento principal, y pega este código:

display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 20px;

Guarda y mira el resultado: los 8 elementos apilados ahora forman una fila perfecta de 8 columnas iguales.

Qué hace cada línea

• display: grid; — convierte la columna en un contenedor de cuadrícula.
• grid-template-columns: repeat(8, 1fr); — define 8 columnas de igual ancho. La unidad 1fr significa "una fracción del espacio disponible": todas las columnas se reparten el ancho equitativamente.
• gap: 20px; — agrega 20 píxeles de separación entre los elementos, tanto horizontal como verticalmente.

Para cambiar el número de columnas, solo ajusta el número dentro de repeat(): ¿necesitas 7 columnas? repeat(7, 1fr). ¿Diez? repeat(10, 1fr). Esa es toda la ciencia.

Paso 3: hacerlo responsive para tablet y móvil

Ocho columnas se ven bien en una pantalla de 1440px — y diminutas en un celular de 390px. La solución es reducir el número de columnas según el dispositivo, y Divi lo hace fácil porque el campo de CSS personalizado tiene pestañas por dispositivo (los íconos de escritorio, tablet y móvil sobre el campo de código).

En la pestaña de tablet, usa:

display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;

Y en la pestaña de móvil:

display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;

Con eso, los mismos 8 elementos se muestran en 8 columnas en desktop, 4×2 en tablet y 2×4 en móvil — el grid acomoda las filas automáticamente cuando los elementos no caben en una sola línea. Si prefieres manejarlo desde una hoja de estilos global en lugar de las pestañas responsive, el equivalente con media queries es @media (max-width: 980px) para tablet y @media (max-width: 767px) para móvil.

Ya que estás puliendo el comportamiento responsive, te puede interesar también cambiar el orden de las columnas en móvil en Divi — la técnica hermana de esta para controlar la dirección del contenido en pantallas chicas.

Ejemplo práctico: fila de íconos de tecnologías

El mismo método funciona con cualquier módulo, no solo imágenes. Para una fila de íconos:

1. Agrega un módulo de ícono dentro de la columna y configúralo (símbolo, tamaño, color).
2. Duplícalo tantas veces como columnas necesites — duplicar conserva todos los estilos.
3. Cambia el ícono de cada copia.
4. Aplica el mismo CSS Grid a la columna.

El patrón duplicar-y-cambiar es mucho más rápido que configurar cada módulo desde cero, y garantiza consistencia visual en tamaños y espaciados.

🎓 ¿Quieres dominar Divi a este nivel en todos los frentes?
En el curso completo de Divi 5 cubrimos el constructor de arriba a abajo — incluyendo las técnicas de CSS que convierten un diseño estándar en uno que se nota profesional. Accede como suscriptor y aprende con casos reales.

Bonus: en Divi 5 esto ya es nativo

Buenas noticias si ya trabajas con Divi 5: la nueva versión del constructor incorpora CSS Grid de forma nativa en las opciones de fila y columna, así que puedes definir grids de cualquier número de columnas sin escribir el snippet a mano. El concepto que aprendiste aquí sigue siendo el mismo (grid, columnas, gap) — solo cambia dónde se configura. Te lo mostramos en detalle en nuestra píldora de Divi 5 sobre CSS Grid.

La técnica manual de este tutorial sigue siendo valiosa por dos razones: funciona en Divi 4 (donde no hay grid nativo) y te da control fino en casos donde la interfaz se queda corta.

Errores comunes (y sus soluciones)

El CSS no hace nada

Revisa que pegaste el código en el Elemento principal de la columna — no de la fila, no de la sección, no de un módulo. Es el error más frecuente: el grid debe aplicarse al contenedor directo de los elementos que quieres distribuir.

Los elementos se ven apretados o desbordados

Si la fila tiene un ancho máximo pequeño, 8 columnas pueden quedar muy angostas. Abre la configuración de la fila y aumenta su ancho máximo (o usa ancho completo) para darle espacio real al grid.

Quedan celdas vacías al final

Si definiste 8 columnas pero tienes 7 elementos, la última celda queda vacía y el conjunto se ve descentrado. Ajusta repeat() al número real de elementos, o agrega el elemento que falta.

Las alturas no coinciden

El grid iguala el ancho de las celdas, no el contenido. Si mezclas logos con proporciones muy distintas, dales una altura fija al módulo de imagen (por ejemplo 60px con ajuste proporcional) para alinear la fila visualmente. Es el mismo principio que usamos para igualar la altura en el módulo del blog en rejilla.

Preguntas frecuentes

¿Cuántas columnas puedo crear como máximo?

CSS Grid no tiene límite práctico — puedes definir 12, 16 o más. El límite real es visual: en una pantalla de 1440px, más de 10 columnas deja celdas demasiado angostas para contenido útil. Para listados largos, considera un carrusel en su lugar.

¿Esto funciona con cualquier módulo de Divi?

Sí. El grid distribuye lo que sea que esté dentro de la columna: imágenes, íconos, textos, botones, blurbs. Eso sí, funciona mejor con elementos del mismo tipo y tamaño similar.

¿Afecta el rendimiento de la página?

Para nada. CSS Grid es una característica nativa del navegador, sin JavaScript ni cargas adicionales. Son tres líneas de CSS — de las soluciones más livianas que existen.

¿Necesito este truco en Divi 5?

Ya no es imprescindible: Divi 5 trae opciones de grid nativas en filas y columnas. Pero entender el CSS te sirve para personalizar más allá de lo que la interfaz expone y para mantener sitios que siguen en Divi 4.

Mis recomendaciones finales

1. Optimiza las imágenes e íconos antes de subirlos — 8 imágenes pesadas en una fila son 8 peticiones que afectan la carga.
2. Revisa el grid en los tres dispositivos antes de publicar; ajusta las columnas por breakpoint según el contenido real.
3. Usa gap en lugar de márgenes en los módulos — es más limpio y predecible.
4. Si vas a repetir el patrón en varias páginas, guarda la fila en la biblioteca de Divi con el CSS incluido.
5. Mantén las proporciones de los elementos consistentes — el grid alinea contenedores, la armonía visual la pones tú.

Conclusión

Con tres líneas de CSS Grid superaste una de las limitaciones históricas de Divi: el tope de 6 columnas por fila. La técnica es liviana, responsive y funciona con cualquier módulo del constructor — y cuando migres a Divi 5, el mismo concepto te espera integrado de forma nativa. Pruébala con tu fila de logos o íconos y cuéntame el resultado en los comentarios.

🎓 ¿Quieres que el CSS deje de ser un misterio?
En el curso profesional de desarrollo HTML y CSS aprendes los fundamentos que hacen posible esta técnica y muchas más: Grid, Flexbox, media queries y posicionamiento, todo aplicado a proyectos web reales. Te espero adentro.