How to achieve this grid behaviour?

[DieSEAExperten]

Hi

We would like to achieve a logo grid similar to this one in the screenshot:

I’ve build a grid with the grid feature of Pro on our staging site but I am not sure what to do to get the second row aligned like in the example?
You can find our staging site and credentials in secret note.
Thank you!

[DieSEAExperten]

After some hours of research I think I understood that one should use row with columns here, e.g. in our case row with 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% (8 columns), Afterwards one can set horizontal and vertical to center. Am I right?

But I am running into a new problem: The original images have different aspect ratios (different width but same height) and they are resized differently to fit the columns. How can I manage them to keep / have all the same height so that they look good? Thanks.

[ruenel]

Hello Daniel,

Thanks for writing in! I would recommend to have 16 cells. The first row cell will have a span of 2 and then the same for the send row excluding the leftmost and right most cells.

If you are not familiar in creating a grid, perhaps this can help:

• https://www.youtube.com/watch?v=Q7XuYdxhuJY&list=PLWPh_GoP7hYXHrOv3sYUNQ5mVeApTnkO2

Best Regards.

[DieSEAExperten]

Thanks for your answer @ruenel! I’ve tried but I don’t understand your approach. Anyhow I do think it would be working with columns instead as you can use flexbox then.

But what about my second problem that seems to be the same with both grid/cells or rows/columns. Do all images need to have (nearly) the same aspect ratio because they get resized proportional? Any way to get around this? I prepared my images to have the exact same height but width is very different because some logos are some kind of longer text and some logos are some kind of round object. Is it possible to let them keep the height without deforming / stretching the images?

[ruenel]

Hey Daniel,

Yes, the images must share the same height. You may need to set the width to auto. I would recommend to have them place in a grid to make it more achievable without deforming or stretching the image. I would love to check out your work if you wouldn’t mind giving us access to the site. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Thanks.

[DieSEAExperten]

Hi, thanks for your answer. I’ve tried again and I am not able to achieve this:

You can see, access and make changes on our site, of course! Thank you! You will find the credentials in secure note.

[ruenel]

Hey Daniel,

Please check this layout:

We use the repeat() functions. You can rearrange the Cells when necessary. Check the URL in the secure note below.

Thanks.

[DieSEAExperten]

Thank you! I will have a look at it and may use it or some parts of it! Great service!

[ruenel]

You are most welcome, Daniel.