Grid elegante usando CSS Grid en Oxygen Builder

-
Bohdan Shila

Pasos que hemos seguido:

Creación de estructura de HTML

Simplemente creamos un <div>, elegimos el layout de grid y añadimos contenido que queramos dentro.

Ancho de columnas y gap

Quitamos el ancho de columna mínimo para que Oxygen Builder no fuerce un ancho concreto y nuestras columnas se adapten correctamente al grid.

Personalización del grid

Aquí ya podemos jugar con el ancho y el alto de cada foto para elegir cuántas columnas y filas ocupará dentro de nuestro grid.

Corrección de altura de fotos

Aquí utilizamos el object-fit: cover para corregir el estiramiento de fotos y mantener sus proporciones.

Corrección de altura de columnas

Recomiendo indicar una altura máxima a las columnas del grid para que las fotos no ocupen demasiado espacio vertical. Entre 150-300px píxeles puede bastar pero todo depende de qué tipo de grid quieres crear y qué contenido tendrá.

Evoluciona por fin tu forma de maquetar webs en WordPress
Aprende a usar Oxygen Builder a nivel profesional y dispara tu productividad en el desarrollo web
Saber más