En Divi 5 apareció una nueva forma de construir layouts que, honestamente, cambia por completo la manera en la que diseñamos sitios web con Divi: el sistema de Grid en Divi 5. Y sí, lo entiendo perfecto: entras al constructor, cambias un layout a Grid, te aparecen un montón de opciones nuevas y lo primero que sientes es “¿qué rayos estoy viendo?”. Justo por eso hice este tutorial, y por eso también estoy escribiendo este post.

En este artículo voy a explicarte, con ejemplos reales, qué es Grid, para qué sirve, cuándo usarlo y cuándo NO usarlo, y cómo entender cada ajuste sin volverte loco. Y como siempre, te lo voy a contar en primera persona, como si estuvieras conmigo en una clase dentro de UXDivi.

Antes de empezar: todo esto lo explico con mucho más detalle y con ejercicios dentro del Mastery de Divi 5 en uxdivi.com/cursos, donde además voy llevando esto hacia casos más avanzados (masonry, layouts complejos y su integración con el Loop Builder). Aquí te dejo el tutorial en modo “te lo explico claro y lo aplicamos”.

Qué es Grid en Divi 5 y por qué importa tanto

Grid en Divi 5 es una forma de organizar elementos en una cuadrícula que controla simultáneamente la distribución horizontal y vertical. Esa es la diferencia clave: no estás solo “poniendo columnas”; estás creando una estructura de cajas que se acomodan en filas y columnas con reglas claras.

Cuando yo digo que “cambia por completo la forma de construir layouts”, es porque Grid te permite crear estructuras que antes eran incómodas o requerían CSS, hacks o muchas secciones duplicadas. En Divi 4 tú estabas muy atado al layout tipo bloque (block) y a una lógica más rígida. Ahora tienes un sistema más moderno para crear tarjetas, secciones con composición editorial, mosaicos tipo Pinterest (masonry) y layouts de UI más actuales.

Grid vs Flex vs Block en Divi 5

Antes de tocar ajustes, necesito que esto quede clarísimo porque es donde más se confunden.

Block

Block es el modo “clásico” heredado de Divi 4. Funciona, pero es limitado para layouts modernos, especialmente cuando quieres control fino del responsive o composiciones no lineales.

Flex

Flex (Flexbox) es ideal cuando quieres que elementos se distribuyan con flexibilidad, alineación, orden dinámico, centrados perfectos, y ajustes responsive súper prácticos. Es el modo que yo uso muchísimo para layouts típicos de marketing: hero con dos columnas, filas con iconos y texto, componentes alineados verticalmente, etc.

Grid

Grid es ideal cuando quieres estructurar “cajas” con una composición más editorial o compleja: tarjetas con diferentes alturas, mosaicos, layouts tipo magazine, secciones donde el alto y el ancho de cada bloque importa, y estructuras donde el control vertical es tan importante como el horizontal.

Consejo rápido: si lo que necesitas es alinear y distribuir contenido de forma flexible, normalmente Flex es más rápido. Si lo que necesitas es una composición de tarjetas con estructura visual clara (especialmente masonry), Grid te da el control que Flex no pretende resolver igual.

Dónde se aplica Grid dentro de Divi 5

Algo muy importante: estas formas de layout no solo son para “filas”. En Divi 5 puedes aplicar Block/Flex/Grid a distintos niveles, por ejemplo en secciones y filas (y en algunos casos hasta dentro de módulos según cómo estén construidos).

Cuando tú abres una fila (Row Settings) y vas a Diseño, vas a ver el selector de Layout Style, y ahí puedes cambiar de Block a Flex o Grid. Lo mismo pasa en varios contenedores del sistema.

Cómo activar Grid en una fila y entender lo que estás viendo

Te explico el proceso tal como lo hice en el video con un ejemplo real.

Yo tenía una fila importada de un layout (de Elegant Themes) que venía con estructura clásica: 3 columnas (25% / 25% / 50%) y el Layout Style en Block. Es normal porque muchas plantillas todavía vienen con la estructura “vieja”, aunque el builder sea Divi 5.

1. Abro la configuración de la fila
2. Voy a Diseño
3. Entro al apartado de Layout
4. Cambio Layout Style de Block a Grid

En el momento en que haces ese cambio, la fila se reorganiza y aparecen opciones nuevas. Aquí es donde mucha gente se asusta: “todo se movió”. Y sí, se mueve, porque Grid está interpretando tu contenido bajo reglas diferentes.

Consejo rápido: cuando cambies a Grid, no corras a tocar 20 settings. Primero revisa algo: que la estructura de contenido tenga sentido. Muchas veces el problema no es Grid; es que tienes demasiados módulos metidos en pocas columnas.

El error típico: querer hacer Grid con pocas columnas y muchos módulos mezclados

En el video muestro un caso perfecto: yo tenía varios elementos gráficos (tarjetas/íconos/textos) pero estaban metidos en solo dos columnas. Eso en Grid se vuelve raro, porque Grid organiza cajas, pero tus cajas no están definidas de forma limpia.

La solución más sencilla es la que hice en el tutorial: “si cada tarjeta debería ser una caja, entonces cada tarjeta debería vivir en su propia columna (o contenedor)”.

Lo que hice fue esto:

1. Agregué columnas nuevas dentro de la fila
2. Moví cada módulo (cada tarjeta) a su propia columna
3. Una vez que cada tarjeta quedó “limpia” en su caja, volví a aplicar una estructura Grid (por ejemplo masonry)

Esto cambia todo. Grid empieza a tener sentido cuando tu contenido está “empaquetado” correctamente.

Aplicar estructuras predefinidas de Grid en Divi 5

Divi 5 trae algo muy útil: estructuras prehechas para Grid. En la fila, dentro de Contenido, puedes usar “Apply Layout” o “Aplicar estructura” (dependiendo del idioma/versión). Ahí vas a ver sets de layouts.

Hay estructuras estándar: 1 columna, 2, 3, 4, 5, 6. Y luego hay estructuras especiales, incluyendo estilos tipo masonry y variantes con composición más creativa. También hay estructuras tipo “sidebar” donde tienes un bloque angosto y uno ancho (muy útil para secciones estilo blog o documentación).

Mi recomendación: no intentes reinventar la rueda al principio. Usa una estructura predefinida, acomoda tus cajas, y luego ajusta gaps, alturas y columnas manuales.

Ajustes principales de Grid en Divi 5, explicados sin enredarte

Cuando ya tienes tu fila en Grid y tu contenido está “ordenado”, ahora sí: ajustes.

Gap horizontal y vertical

El gap es la separación entre columnas y filas dentro del Grid. Es importante entenderlo así: el gap afecta la distancia entre “cajas del grid”, no el padding interno de tus módulos.

Si tú ves que todo está demasiado pegado, subes gap. Si lo ves demasiado abierto, lo bajas. Yo normalmente empiezo con un valor moderado y lo ajusto al final, cuando ya tengo claro el layout.

Column width y la lógica de anchos

Aquí viene una de las partes que confunde: la forma de definir anchos puede ser automática, igualada, fija, o manual con sintaxis tipo CSS Grid.

En Divi 5 puedes llegar a usar la sintaxis de columnas, por ejemplo con fracciones: 1fr, 2fr, 3fr. Esto es oro cuando quieres columnas proporcionales.

Ejemplo real (tal como lo mostré):
Si quiero que dos columnas sean más anchas y las otras dos más chicas, puedo usar algo como:
2fr 2fr 1fr 1fr

Eso significa: la primera y segunda columna ocupan el doble de espacio que la tercera y la cuarta.

Si ves espacios raros, normalmente es porque tu grid está creando proporciones que no cuadran con el contenido. Ajustar fracciones suele solucionarlo: a veces una columna de texto necesita más fr (por ejemplo 3fr) para que no se vea aplastada.

Altura de filas

Grid también te deja controlar cómo se comportan las alturas. Puedes dejarlo en auto (recomendado al inicio) o forzar alturas iguales, o alturas mínimas/fijas.

En layouts tipo tarjetas, a veces conviene igualar alturas para que la sección se vea más ordenada. Pero no siempre: si estás buscando un estilo masonry, normalmente dejas que el contenido determine la altura.

Número de filas y columnas

Esto es útil cuando estás armando estructuras más grandes. Si tu grid se siente “apretado” o no está acomodando elementos como esperas, revisar rows/columns suele revelar el problema.

Dirección y densidad

La dirección cambia la forma en que Grid “fluye” los elementos (y puede reorganizar visualmente tu composición). La densidad, cuando es densa, intenta rellenar huecos. Esto es más relevante cuando tienes muchos elementos y quieres que se acomoden tipo masonry sin dejar espacios.

Alineación y justificación

Estos ajustes aparecen en Grid porque puedes alinear todo el conjunto dentro del contenedor y también alinear elementos en distintas formas. Si ves que tu grid no “ocupa” como quieres el ancho o el alto del contenedor, revisa estas opciones.

Mi consejo: primero soluciona el layout con estructura y gaps. Luego ajusta alineaciones si realmente lo necesitas. Si no, te puedes meter en un loop de “muevo una cosa y se rompe otra”.

Ejemplo real: combinar Grid con Flex para un resultado más limpio

Algo que a mí me encanta de Divi 5 es que no te obliga a elegir una sola cosa para todo. Yo lo hice en el tutorial: usé Grid para estructurar la fila (las cajas), y dentro de algunas columnas cambié el layout a Flex para alinear contenido hacia abajo o centrarlo mejor.

Esto es un flujo súper realista:

1. Grid para la macro estructura (tarjetas/cajas)
2. Flex dentro de cada caja para alinear elementos internos (por ejemplo, icono + texto alineados, o botones al fondo)

Esa combinación te da layouts modernos sin CSS.

Consejo rápido: si tu tarjeta tiene contenido de alturas diferentes y quieres que el botón quede alineado abajo en todas, poner la columna en Flex (direction column) y justificar al final suele ser el camino más rápido.

Cuándo usar Grid y cuándo no usarlo

Yo no soy fan de usar Grid “por usarlo”. Hay casos donde Block o Flex es más práctico.

Yo uso Grid cuando:

• Estoy diseñando secciones tipo tarjetas y quiero una composición visual moderna.
• Quiero un estilo masonry o una cuadrícula editorial.
• Necesito control vertical y horizontal al mismo tiempo.
• Quiero preparar el terreno para Loop Builder con grids avanzados (posts, productos, etc.).

Yo prefiero Flex cuando:

• Tengo layouts comunes de landing: dos columnas, héroes, secciones con alineaciones fáciles.
• Quiero reordenar columnas en móvil sin complicarme.
• Estoy trabajando más con alineación y distribución flexible que con composición de “cajas”.

Recomendaciones finales para dominar Grid más rápido

Mi recomendación para que Grid deje de sentirse “confuso” es muy simple: no lo estudies como un panel de settings. Estúdialo como un sistema de estructura.

Primero define tus cajas (contenedores). Luego aplica estructura. Luego ajusta gaps. Después, si hace falta, controla proporciones con fr. Y finalmente, usa Flex dentro de columnas cuando necesites alineación interna.

Y algo más: Grid brilla cuando lo conectas con herramientas nuevas de Divi 5 como Loop Builder. Si tú quieres crear grids de entradas del blog, productos o cualquier contenido dinámico, Grid se vuelve una pieza central.

Cursos y contenidos recomendados en UXDivi

Si quieres llevar esto a un nivel pro, con ejemplos avanzados y ejercicios, te recomiendo ir directo a uxdivi.com/cursos y ver el Mastery de Divi 5, donde explico Grid con más profundidad y lo conecto con casos reales (incluyendo layouts más avanzados, organización del sistema de diseño y flujo de trabajo).

También te va a servir mucho revisar las clases relacionadas con Flexbox y Loop Builder dentro del mismo Mastery, porque es donde Grid realmente se potencia.