Aprende a crear layouts avanzados con CSS Grid en Divi 5 con el nuevo sistema de cuadrículas

En este tutorial abarcaremos una de las mejores características que han llegado a Divi 5 y es su sistema de cuadrículas con CSS Grid. Aprenderás paso a paso cómo crear grillas con CSS Grid, haremos una composición avanzada y única y además como plus te mostraré cómo trabajar con efectos hover elegantes y profesionales.

Si bien el tutorial está enfocado en la construcción de rejillas con CSS Grid en Divi 5, fiel a la costumbre de OV DIVI durante la marcha aprenderás varios trucos que puedes aplicar en tus composiciones, tales como posiciones absolutas, efectos hover, diseño pixel perfecto, etc.

¿Qué vamos a construir?

Ver el resultado final en vivo

Crearemos una composición avanzada con CSS Grid donde distribuiremos 5 bloques de diferentes tamaños en un diseño asimétrico y profesional. Cada tarjeta tiene su propio tamaño y posición estratégica, creando un layout visualmente interesante y moderno con efectos hover suaves que le dan ese toque premium.

Este tipo de composición es súper versátil y la puedes usar para:

• Menú de navegación visual – Como página de inicio donde cada bloque lleva a una sección diferente de tu sitio
• Portafolio creativo – Mostrando tus mejores proyectos con imágenes impactantes
• Sección de servicios – Presentando lo que ofreces de forma visualmente atractiva
• Galería de productos destacados – Para tiendas online que quieren destacar categorías o productos específicos
• Landing page de agencia – Donde cada bloque representa un área de expertise
• Página de recursos – Organizando guías, tutoriales o herramientas de forma visual

Lo mejor: lograremos esto usando principalmente las opciones nativas de Divi 5, con solo un poco de CSS para los efectos hover y detalles finos.

¿Por qué CSS Grid?

CSS Grid llegó para quedarse. Es la forma moderna de crear layouts en la web y Divi 5 lo integra de manera nativa, lo que significa que puedes crear diseños complejos sin necesidad de builders adicionales o plugins pesados.

Con Grid puedes controlar exactamente dónde va cada elemento, tanto en filas como en columnas. Es como tener una cuadrícula invisible donde colocas las piezas donde quieras. Olvídate de las limitaciones de las 4 columnas tradicionales de Divi 4.

Lo que aprenderás en este tutorial

1. Configurar CSS Grid en Divi 5

Te mostraré cómo activar y configurar el sistema de cuadrículas directamente desde las opciones de Divi. Sin código complicado, solo ajustes visuales que verás en tiempo real.

2. Crear una composición asimétrica con 5 bloques

Verás cómo hacer que algunos bloques ocupen más espacio que otros, cómo definir proporciones personalizadas, y cómo controlar el espaciado entre elementos. Aprenderás a pensar en términos de filas y columnas para crear diseños únicos.

3. Efectos hover profesionales

Aquí viene la parte divertida. Implementaremos:

• Zoom suave en las imágenes de fondo (la imagen crece pero el contenedor se queda estático)
• El título que se desplaza ligeramente al hacer hover
• La línea del «Ver más» que se extiende
• El ícono de flecha que rota 45 grados con un efecto scale
• Overlays que se oscurecen sutilmente para mejorar la legibilidad

Todo con transiciones suaves y tiempos perfectamente calibrados que dan esa sensación premium.

4. Trucos y técnicas durante el camino

Como siempre en mis tutoriales, no solo veremos el «qué» sino el «cómo» y el «por qué». Aprenderás:

• A usar posiciones absolutas para sobreponer elementos (como el ícono de flecha)
• Cómo aplicar transiciones con timing perfecto usando cubic-bezier
• A estructurar tus clases CSS para que sean reutilizables en otros proyectos
• El truco de separar el contenedor de la imagen para lograr el efecto zoom independiente
• Pequeños detalles que marcan la diferencia entre un diseño amateur y uno profesional

¿Es difícil?

Para nada. El tutorial está pensado para que lo puedas seguir sin importar tu nivel. Si apenas estás empezando con Divi 5, perfecto. Si ya tienes experiencia, también te llevarás varios trucos nuevos.

Voy explicando cada paso de forma clara, mostrando exactamente dónde hacer clic y qué valores usar. Y por supuesto, te doy el código CSS listo para copiar y pegar (y explicado para que sepas qué hace cada línea).

Del ejemplo a tus propios proyectos

Una vez que domines la técnica, podrás adaptarla a infinitas variaciones:

• Cambiar el número de bloques (¿quieres 4 en lugar de 5? ¿O tal vez 6?)
• Modificar las proporciones (hacer algunos bloques más grandes o pequeños)
• Ajustar los colores, overlays y efectos a tu marca
• Crear versiones verticales u horizontales del mismo concepto
• Combinar con otros módulos de Divi para crear páginas completas

La idea es que entiendas los fundamentos para que puedas crear tus propias composiciones únicas.

Accede al tutorial completo

Este tutorial forma parte de mi programa de Tutoriales Exclusivos OV DIVI, donde cada semana publico contenido nuevo sobre desarrollo con Divi.

Si te interesa llevar tus habilidades con Divi al siguiente nivel y acceder a una biblioteca completa de tutoriales como este, puedes unirte aquí:

👉 Tutoriales Exclusivos OV DIVI

Dentro encontrarás más de 220 tutoriales sobre Divi, plugins custom, módulos exclusivos y técnicas avanzadas que no comparto en ningún otro lugar.

Recursos adicionales

Si quieres ir preparando terreno antes de ver el tutorial, Elegant Themes tiene una guía completa sobre el sistema CSS Grid de Divi 5 que te puede servir como introducción: Everything You Need to Know About Divi 5’s CSS Grid System