A responsive, 4 column typography grid for emails

Acorn's four-column responsive grid system gives you the flexibility to create layouts of all shapes and sizes, for both desktop and mobile. Create solid desktop emails and adapt them to specific mobile requirements with our utility classes.

Acorn's four column grid
Acorn's 4-column grid. Column widths show available content area. See column widths with gutters included.

Row #

Rows are 100% wide, center-aligned stackable tables that go inside a container and hold your column tables. Their maximum width is constrained by the container, so we can take advantage of that and use width="100%" on them. This way, we don't need to worry about resetting widths through CSS when nesting rows:

Background colour: row tables don't have one, they inherit the container's background colour in order to avoid a box model bug in some email clients, that creates unwanted hairlines at the bottom. If you do need different background colours on individual rows, make sure to test and check if this hairline is acceptable in your case.

Row tables have 24px padding set on both sides of their table cell. This creates the impression that the container has padding (in fact, it does not), all while giving us opt-in flexibility: the goal here is to give content some breathing room in the container, by creating whitespace.

However, we now have the freedom to choose whether we use this whitespace or not. For example, in case we need an image to stick to the side, we can remove row padding along with the column's padding for that side:

Inside the row table, Acorn nests another table that contains the grid columns. As you can see in the example above, this nesting allows us to set container padding and column gutters independently, so that we don't always need to remember to set different paddings on the outer edges of the first and last columns in the grid.

Together, this row padding combined with column gutters create an apparent container padding of 32px, resulting in a nice 'boxed' layout on both mobile and desktop.

Of course, you can use any of the mobile spacing helpers on the row table cell, or on each grid column, to fine tune mobile spacing to your requirements.

The grid is designed to work with up to 4 columns in a row table. If you add more than 4, the container will expand and column width will become unpredictable, so don't do it.

Column #

Columns are the <td> tags inside the nested table of a Row table:

Each column has a fixed width, defined through the width="" attribute for desktop and tablets. This fixed width is set at 122px in the 4-column grid, but will be different depending on the amount of columns used.

See all Acorn grid column widths both in the grid image above ↑ and in the examples from the /grid folder ↗.

Columns in Acorn have 8px gutters, defined through inline shorthand-CSS padding for each side.

Columns on Mobile #

Columns are required to use a col class, needed for normalization on mobile. This class will set the column width to 100%, and will also adjust content line-height to a smaller value, more suitable for mobile devices:

Because we're using <td> and resetting it to display: inline-block; for mobile, column stacking cannot work properly in the Android 4.4 native email client. There are no plans to support this client in Acorn.

Column Widths on Mobile #

If you don't want columns to stack on mobile, you can use custom column mobile width classes:

The class names follow the familiar Bootstrap 4 naming convention:

  • col- - as in 'column'
  • -sm - indicates it will apply on small screens only
  • -X - number from 1 to 3, or 'third': the equivalent amount of desktop columns to span

These classes use percentage-based max-width, instead of width. This way, we only constrain the mobile width, instead of overriding it with !important. Being able to write less code is always a win :)

You can use any combination of the mobile width classes. If their sum exceeds the equivalent of 4 columns, the first column that won't be able to fit in the same row will break onto the next one:

Remember, columns that only have the col class (re-used instead of adding a redundant col-sm-4) will still be 100% wide and break on to their own line on mobile.

Column Offsets on Mobile #

You can use offset classes to push columns to the right on mobile. These use the CSS margin-left property.

Just like mobile widths, the naming convention follows the Bootstrap 4 pattern:

  • col- - as in 'column'
  • -sm - indicates it will apply on small screens only
  • -push - indicates it will push the column
  • -X - number from 1 to 3, or 'third': the equivalent amount of desktop columns to span

You can use these classes to fine tune and adapt your layouts for mobile devices. For example, let's create a 3-column desktop layout that changes to 2+1 columns on mobile, and aligns the third column (price) with the second one (description) on mobile:

Next Up: CSS Reset →

Current Version