En este tutorial gratuito de OV DIVI aprenderás a crear grillas con columnas ilimitadas para cualquier grupo de módulos en divi con CSS GRID sin plugins 🤩
Divi, con su interfaz visual intuitiva, ya ofrece una gama impresionante de opciones de diseño. Sin embargo, cuando deseas llevar tus composiciones al siguiente nivel, CSS Grid emerge como un recurso invaluable.
La versatilidad de CSS Grid te permite explorar diseños más allá de las restricciones predeterminadas de Divi. Mientras que Divi proporciona columnas y filas, CSS Grid te permite experimentar con disposiciones más complejas y creativas. ¿Quieres una composición de más de 6 columnas? ¿Quieres una combinación de columnas de diferentes anchos? ¿O quizás una estructura asimétrica que desafíe las convenciones? CSS Grid + DIVI lo hace posible.
Por ejemplo, si deseas organizar módulos en una disposición de tres columnas, el siguiente código será tu mejor amigo:
display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
Este simple código establece una cuadrícula con tres columnas, cada una ocupando una fracción igual del espacio disponible, y un espacio entre ellas de 30 píxeles. Este código lo debes aplicar en el elemento padre para que los elementos hijos tomen la composición deseada. Por ejemplo, en el caso de divi el código lo puedes aplicar en los ajustes de la sección para ajustar las filas o en los ajustes de la columna para ajustar los módulos.
Vamos a explorar más ejemplos de cómo puedes utilizar CSS Grid para transformar tus composiciones en Divi.
1. Diseño de Dos Columnas con Ancho Fijo y Flexible:
display: grid; grid-template-columns: 30% 1fr; gap: 30px;
Este código define una cuadrícula con dos columnas. La primera columna tiene un ancho fijo del 30%, mientras que la segunda ocupa el resto del espacio disponible (1fr). El espacio entre ellas es de 30 píxeles. Esto es ideal cuando deseas destacar un elemento con un ancho específico mientras mantienes la flexibilidad en el resto de la página.
2. Composición de Tres Columnas con Proporciones Personalizadas:
display: grid; grid-template-columns: 25% 50% 25%; gap: 30px;
En este ejemplo, la cuadrícula se divide en tres columnas con anchos del 25%, 50%, y 25% respectivamente. Esto te permite crear diseños asimétricos y experimentar con proporciones personalizadas para cada sección de tu página.
3. Alineación Vertical del Contenido con align-items: center;:
display: grid; grid-template-columns: 25% 50% 25%; gap: 30px; align-items: center;
Aquí, la cuadrícula de tres columnas se complementa con la alineación vertical centrada. Esto es particularmente útil cuando trabajas con contenido diverso y deseas mantener una apariencia equilibrada. Cabe mencionar que no solamente disponemos de «center» también podemos agregar otros valores como: start, end y stretch.
CSS Grid no solo se trata de estructuras estáticas; su potencial se despliega en la capacidad de adaptarse a tus necesidades específicas. Al incorporar estos ejemplos en Divi, estás dando un paso más allá en la creación de diseños web dinámicos y visualmente impactantes. Juega con estos conceptos y descubre cómo CSS Grid puede elevar la estética y funcionalidad de tus proyectos en Divi. ¡La creatividad no conoce límites cuando se trata de la combinación de Divi y CSS Grid!
Excelente articulo, en caso de que quisiera tener una estructura de una linea arriba completa (del largo de 4 imágenes) y las 4 imágenes abajo ¿como seria el código?
Hola Juan, muchas gracias. No te entiendo muy bien pero si tienes un diseño o imagen de referencia te puedo ayudar