<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1657797781133784&amp;ev=PageView&amp;noscript=1">
✖ Don't show this message again.

What do you need to know to grow?

Tell us in this short reader survey.

See the Survey

Join us for HubSpot Training Day @ INBOUND 2017.

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

by Juli Gaudette


March 9, 2017 at 2:00 PM

HubSpot support seriesIn 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.

insert-image in table.png

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!


Written by Juli Gaudette

Juli started at HubSpot in the fall of 2016. Her hobbies include running marathons, hiking tall mountains, skiing down tall mountains, using Oxford commas, and dissecting gnarly workflows.


Subscribe to the blog

Articles for HubSpot users

  • All about inbound
  • HubSpot software education
  • HubSpot growth hacks
  • Stories from our users
  • HubSpot product updates
  • How HubSpot does inbound
  • Tips from the support team

Follow HubSpot

HubSpot Training Day @ INBOUND 2017

Jump right into the software

To make it easy for HubSpot users to follow along in their own software, we regularly link to the product and user-only training.

(Not a HubSpot user? Test it out in a free trial.)