The Grid

Grid

A solid 12 column responsive grid for emails

The Pine Email Framework is based on a grid built with familiar concepts: wrappers, rows, and columns.

Because embedded CSS support is so inconsistent in email, Pine is desktop-first. This means that wrapper, row, and column widths are set with attributes and inline CSS, and they get overridden through a @media query on the mobile breakpoint.

Desktop Grid

Wrappers are 100% wide, rows are 700px and centered.
The columns are 35px, with 10px padding on each side (gutters).
In each row, the first column has 30px left padding, while the last column has 30px right padding.
This gives you 640px of room for your content (including column gutters).

Mobile Grid

The mobile grid kicks in at 699px screen width. Wrappers, rows, and columns are all percentage-based.
Wrappers are still 100%, but rows are set to be 90% wide by default.
If you want, you can safely change mobile row width in the CSS, to be 100% or any decently-wide percent.
However, 100% wide rows will cause the wrapper background colour to not be visible on mobile anymore.
Columns (including nested ones) keep their 10px gutters, so you get the same consistent spacing when using multiple columns in a row.


Wrapper

Wrappers are 100% full width tables that can hold one or more row tables.
Pine comes by default with a single wrapper that acts like a container for all your rows.

Example: Single Wrapper
								
									

										
Individual Wrapper Backgrounds

With Pine, you can also wrap each row in a wrapper.
This is useful if you need full width background colours or images on a row basis (like Campaign Monitor or Litmus do).

Example: Individual Row Wrappers
												
													

														
														
12 column
6 6

Row

Rows are 700px, center aligned, stackable tables, that go inside a wrapper and hold your column tables.
You can insert up to 12 grid columns in a row table. If you add more than 12, the email might expand (email tables can't float/flush like divs) and column width will become unpredictable, so it's not recommended.

Example: Row
								
									

										
12 column
Tip: see that  bgcolor="#FFFFFF"  attribute? You should always define a background colour on rows, unless you want your content background colour to be the same as the wrapper's. Pine sets it to  #FFFFFF  by default.
Collapsed Rows

Pine ships with two versions of the grid:

  • Standard - first and last columns have 30px outer padding
  • Collapsed - outer padding is removed and evenly distributed (added) to the column widths

Collapsed Rows for Mobile

You can use the mobile-collapsed class on a row, to have its outer padding removed on mobile.
This will remove left padding on the first column, as well as right padding on the last column.

Example: Collapsed Row For Mobile
												
													

														
We have side padding for desktop... ... but it's removed on mobile

You don't need to add the mobile-collapsed class on nested rows - they are automatically collapsed for mobile, as long as their parent row contains the class.


Column

Columns are <th> elements that go inside the <tr> of a row table.

Each column has a predefined width for desktop. To better understand column widths, please refer to this image:

The padding on each side of a column is 10px, with the exception of the first and last columns.
The first column in a row has 30px left padding, while the last column has 30px for the right padding.

Columns on Mobile

By default, columns will stack on mobile - Pine resets them to 100% width and adds a mobile-12 class for consistent gutters.
You can change the 12 in mobile-12 on a column <th>, to define what size a column should take on mobile.
It can be any integer between 1 and 11 (both inclusive), and no matter how many columns you have, it should add up to 12.

mobile-12 should only be used on non-nested columns that have different left/right padding set inline, or no left/right padding at all. This will provide consistent gutters for full width columns on mobile.

Example: 4-8 For Desktop, 6-6 For Mobile
												
													

													
4 8
Column Offsets on Mobile

Pine supports column offsets for mobile, and they work as you're already used to from CSS frameworks, like our own Timber.
You just add a mobile-offset-X class to a column. This sets a percentage-based left margin on the column, only for mobile.

Example: Full Width for Desktop, Half and Centered for Mobile
												
													

														
12 column

So as long as its width is an even number, you can center any grid column on mobile, by using an offset that you can calculate like this:

mobile offset = (12 - X) / 2

... where X is the number from the mobile-X class you've set on the column.

Collapsed Columns on Desktop

Sometimes, you need to stick an image to the very left or right of your email. Or maybe both.
This is easily done on the first and last columns, by removing the 30px side padding.

IMPORTANT: when you remove side padding on a parent column, always add that number back to its width. If you don't, the width of the column will be automatically calculated by the email client/browser, and this can lead to inconsistent results. This is not needed for nested columns though, just make sure their widths add up to the parent column's width.


Nesting

You can nest columns to create complex layouts. Simply insert a new row as a child element of a column.
This new row can contain the entire grid if you wish to, but it's recommended to use 2 columns at most.

When nesting, you must add the has-columns class on the column that you nest in, as shown below.
Doing so will preserve the 10px gutters on mobile, providing you with consistent spacing between columns.

Example: 6-6 Nested Inside a 6-6
												
													

														
6 6
6

When nesting columns:

  • Use the same type of grid as you did for the parent. If you used the standard grid, also use it for the nested columns
  • If nesting a standard grid, remove the left padding on the first column, and the right padding on the last column


A word on high resolution in Outlook for desktop

Outlook for desktop supports 120 DPI, which can sometimes lead to blown up emails.

To keep things predictable, Pine adds some XML code for Outlook's Word rendering engine to keep the email at the normal, 96 DPI resolution. Knowing that, you should not remove the xmlns:o="urn:schemas-microsoft-com:office:office" attribute from the <html> tag.

Theme Mountain

Current Version