Responsive Twelve Column Grid System for HTML Emails

Spacing in HTML email layouts has always been a challenging and tricky topic. The email client standards further make the task infinitely more complicated. To overcome the spacing issues, the email layout developers leverage padding, cellpadding, margins, and breaks between the grids. Though these techniques create spacing, but they end up making the layout incompatible with the email client.

Our MailBox Framework offers 12 columns responsive grid system which helps you resolve the spacing issues and lets you create email layouts of all shapes and sizes. The responsive grid gives you the flexibility to make desktop emails which are also adaptive to all the mobile devices as well as the email clients.

Gutter

As an alternative to double-sided margin, padding, and other spacing techniques, our Mailbox Framework uses gutter. A gutter is placed after the grids, but it is not considered as an empty space or an alley. A gutter in the layout is treated as a grid, thus, maintaining the design consistency and the compatibility of the layout with the email client.

Our 12 columns responsive grid system comes with three types of mostly used gutter widths and they can be adjusted from the /_settings.scss file. You can even create a responsive layout entirely without a gutter using the MailBox framework.

VariablesValue
$gutter-small-width12px
$gutter-medium-width24px
$gutter-large-width48px

We use gutter widths between two grids. By default, we have configured small and medium gutter width between all the grid combinations. However, they can be easily adjusted and reconfigured from /_settings.scss file.

Wrapper Grid System without Gutter

The HTML email is wrapped in order to ensure that its structure and layout is consistent when it reaches the email client. An email is also said to be wrapped when it doesn’t conflict or overlaps the interface of the email client. By default, the wrapper value is 700px. However, it can be adjusted using the /_settings.scss file. With our framework, you can create responsive fluid layouts easily without a gutter using the wrapper grid system.

Here are the classes and value for the twelve column grid system when you are using the wrapper grid system without a gutter.

ClassesWidth
.wrapper-grid1–without-gutter60px
.wrapper-grid2–without-gutter120px
.wrapper-grid3–without-gutter180px
.wrapper-grid4–without-gutter240px
.wrapper-grid5–without-gutter300px
.wrapper-grid6–without-gutter360px
.wrapper-grid7–without-gutter420px
.wrapper-grid8–without-gutter480px
.wrapper-grid9–without-gutter540px
.wrapper-grid10–without-gutter600px
.wrapper-grid11–without-gutter660px

Wrapper Grid System with Gutter

With our MailBox Framework in place, the wrapper grid system lets you create responsive fluid layouts with gutter as well. Again, the default wrapper value has been set to 700px, which can be adjusted using the setting file.

Here are the classes and value for the twelve column grid system when you are using the wrapper grid system with a gutter.

ClassesGrid WidthGutter Width
.wrapper-grid1–with-gutter49px12px
.wrapper-grid2–with-gutter110px12px
.wrapper-grid3–with-gutter171px12px
.wrapper-grid4–with-gutter232px12px
.wrapper-grid5–with-gutter290px24px
.wrapper-grid6–with-gutter348px24px
.wrapper-grid7–with-gutter406px24px
.wrapper-grid8–with-gutter464px24px
.wrapper-grid9–with-gutter522px24px
.wrapper-grid10–with-gutter580px24px
.wrapper-grid11–with-gutter638px24px

Container Grid System without Gutter

As the name suggests, Container Grid contains grid items that are placed inside either columns, rows or both. The default value of the container grid is 600px but it can easily be adjusted using the setting file. Use the MailBox Framework to make container grid system without gutter.

Here is the table that shows the default value of different container grid without a gutter.

ClassesDefault Value
.container-grid1–without-gutter50px
.container-grid2–without-gutter100px
.container-grid3–without-gutter150px
.container-grid4–without-gutter200px
.container-grid5–without-gutter250px
.container-grid6–without-gutter300px
.container-grid7–without-gutter350px
.container-grid8–without-gutter400px
.container-grid9–without-gutter450px
.container-grid10–without-gutter500px
.container-grid11–without-gutter550px

Container Grid System with Gutter

The container grid system lets you create responsive fluid layouts with gutter as well. The default container value has been set to 600px, which can be adjusted using the setting file.

Here are the classes and value for the twelve column grid system when you are using the container grid system with a gutter.

ClassesGrid WidthGutter Width
.container-grid1–with-gutter39px12px
.container-grid2–with-gutter90px12px
.container-grid3–with-gutter141px12px
.container-grid4–with-gutter192px12px
.container-grid5–with-gutter240px24px
.container-grid6–with-gutter288px24px
.container-grid7–with-gutter336px24px
.container-grid8–with-gutter384px24px
.container-grid9–with-gutter432px24px
.container-grid10–with-gutter480px24px
.container-grid11–with-gutter528px24px