Grid/Flexbox layout with different aspect ratio

Hi Pesiiin,

You can start with a GB 2-column Grid Block. Maybe give it a 60-40% width ratio.

Example: https://share.getcloudapp.com/qGuqExQg

Then add the images inside each Container.

For one image, set a specific Height.

For the other image, set the Height to 75%. Make the Container Block’s height which has this image to 100%. This is the 4/3 image (longer width).

Set the display of the Container Blocks to flex, and align them to center vertically.

No. Sorry, I meant to add GB Image Blocks inside the Container Block.

Did it not work? Can you share the link to where you have it built?

Or, do you need it to be a Background Image?

Hi there,

it will require some custom CSS.

1. Add this CSS to your site:

.aspect-43 {
    aspect-ratio: 4/3;
}
.aspect-34 {
    aspect-ratio: 3/4;
}

2. In the editor.
2.1 Add a Container Block
2.1.1 Set its Layout to Flex -> Row. And Align Items -> Center.

3. Inside the Container add a new container.
3.1 in Layout > Flex Child set its Flex Grow to 1
3.2 give it background image, and give it a small Sizing > Min-height eg. 60px. This is just so you can see it in the editor.
3.3 in Advanced > Additional CSS Class(es) add: aspect-43

4. Duplicate that container.
4.1 Change its background.
4.2 Change the Advanced > Additional CSS Class(es) to: aspect-34