Grid elegante usando CSS Grid en Oxygen Builder
En este tutorial vemos cómo crear un grid personalizado de fotos, posts, enlaces… usando CSS Grid en Oxygen Builder.
Oxygen tiene un editor visual de grids bastante particular que nos facilita enormemente este trabajo.
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á.
