How to Style a Grid of Small Images in an Email [HubSpot Support Series]

In the age of inbound, it's important to have well designed emails with eye-catching images. You even use a group of smaller images to create a larger eye-catching piece of content.

Here in support, we see a lot peers who can’t seem to make their group of small images align, especially in multiple browsers, to create the perfect "tile effect."

There always seems to be just one image off by a single pixel, or the spacing seems to be a little different between the rows, or it always looks a little weird in different email clients. And what if you want the grid alignment to be maintained on mobile devices too?

Conventionally, if one wanted to include four small images on their email, in two rows of two, the template would look like this:

The email using this template would present the images like this on desktops:

And like this on mobile:

Most marketers would not stop here; they would continue to edit the images, one by one, re-sizing and re-spacing until all of the margins were equal and all of the tiles aligned. However, during all of this re-spacing and re-sizing, all will eventually come to the same conclusion. There must be an easier way!

Well, we do have an easier way. In just four easy steps, you can create the same desired “tile effect” by replacing all four image modules with just one rich text module.

(Please note: The image table you'll create in this process must be smaller than 570 pixels wide to achieve the proper tile effect on a mobile device.)

Steps for creating a tile effect image

Step 1

Within the email template, replace all four image modules with one rich text module.

Step 2

Once the rich text module has replaced the four Image modules, navigate back to the email editor. You can then use the rich text editor to insert a single 2x2 table.

This will create a blank table in the rich text module.

Step 3

By right-clicking in each individual cell, you have the option to insert each photo into its respective cell.

Once all the photos are inserted, you still end up with the same dilemma. Some of the images are still slightly out of line.

This time you have an easier way to re-size and re-space.

Step 4

By simply clicking on each image, you get all of the editing options you need. You can center the image using the alignment tools, re-size it using the “Options” link, and add spacing using the “Spacing” link. All from within the editor!

By centering all of the tiles here, you're left with a perfectly aligned “tile effect” group of images.

Which also continues to appear as a grid in all mobile views.

Now that you know how to retain an image grid in multiple email clients, go forth and create more beautiful emails! 

Want to hear more from Juli? She's hosting an Ask Me Anything (AMA) on the HubSpot Community from January 14, 2019 – January 28, 2019. Join the conversation here.