How to align item's in columns so they are responsive

Design help General
1

Hey guys,

I currently have 3 columns inside of a container, two columns have two images that are 1x1 ratio. The third image is taller to stretch the height of the two images.

I am looking to get the height of this third image, to match the height of the two images to the right of them, I would also like the spacing between all 4 images on the right, and the tall image on the left to be the same.

Any ideas on how I can do this, as well as make it respond nicely?

Read Only Link: https://preview.webflow.com/preview/advinor-cpa?utm_medium=preview_link&utm_source=designer&utm_content=advinor-cpa&preview=39cb762ec80b9e03dbce8143983a9f54&mode=preview

Published Link: http://advinor-cpa.webflow.io/

2

I am looking to have the 2x2 grid respond to the height of the left image. That way they take up the excess spacing around the left and right side of the taller image. Any ideas?

Screen Shot 2019-12-08 at 12.05.38 AM
Screen Shot 2019-12-08 at 12.05.38 AM3360×2100 956 KB

Read Only Link: https://preview.webflow.com/preview/advinor-cpa?utm_medium=preview_link&utm_source=designer&utm_content=advinor-cpa&preview=39cb762ec80b9e03dbce8143983a9f54&mode=preview

Published Link: http://advinor-cpa.webflow.io/

3

Any assistance would be great. Thanks guys!

4

Why not just use grid? CSS grid in Webflow | Webflow University

5

The reason I thought grid wouldn’t work because I would need it to be a 2x2 with one tall column.

With a grid, this would give me a 3x2. But I don’t actually need the second row in the third grid.

Is there a way I can disable this third row in the second column?

6

Grid Yes You can :slight_smile:

https://www.loom.com/share/f09735eda00243a98fa33aacf8809506

1 Like
7

This is perfect! @shokoaviv, thanks so much!

One thing though, the responsiveness is a little bit questionable. Any ideas on how I can make it adjust both vertically and horizontally and not just horizontally?chrome_BlcLkqt4eP|690x336

8

Hi

Look how fun is Grid

https://www.loom.com/share/48613b455df741f2b72c9ac1b15b838a

9

Fantastic @shokoaviv, thanks so much!

10

Hi Aseem,

Take a look at the image attached below, it is what I came up with to customize each page a little more. Let me know what you think!

I will have all the whole website done tonight, then we can polish tomorrow and plan to launch on Monday!

image.jpg
image.jpg1920×888 244 KB