Create A Grid With Same Height Images

[whitemedia]

Hi,

I am trying to create what should be a simple grid, but I am totally beaten! I have a series of 25 images which I want to create into a grid of logos. Each image has a URL pointing to an original media article. Each image is a uniform 100px high, but with different widths.

I am using Pro (latest updates) and have tried to create the grid using row/columns and various Pro plugins.

Attached is an image of what I am trying to achieve. Any guidance you can give would be most welcomed!

Thanks,
Christopher

[Prasant]

Hello Christopher,

Thanks for writing in!

You can use Block Grid element in Content Builder and after that use the solution shared in following thread:

Block grid equal heights

You also have the option of using Essential Grid Element which can be installed from Pro > Validation > Extension.

Essential Grid | Themeco Docs

Thanks.

[whitemedia]

Hello Prasant,

Thank you for your suggestion. Unfortunately it did not work for what I needed, especially as block grid is limited to 4 columns.

However, you set me on the path to the solution! For anyone else wanting to achieve an image grid, here is what worked for me:

• All images have the same height (100px)

• I created a standard text element in a full-width standard column

• I inserted an image into the text element (subsequent images were also added, separated by a space (not using line breaks or paragraphs).

• I edited the image, going to its “Advanced Options” and entering a class ( I used the class “media-items”) into the “Image CSS Class” field

• Finally, I entered the below CSS into the page’s CSS customiser.

  .media-items {
  padding-left: 20px;
  padding-right: 20px;
  height: 30px;
  width: auto;
  }

Thanks again for the directions!
Christopher

[rad]

Glad it’s working now and thanks for sharing! Cheers!