Sections
Multiple columns
A few layout ideas to reconfigure columns for different screen sizes in email clients.
Reading on small displays is easier when done in a top-to-bottom fashion. Using hybrid design and media queries, we can switch multi-column layouts to a single-column one.
Two even columns
Section titled Two even columns<tr>
<td style="padding: 20px; background-color: #ffffff;">
<div style="display: table; width: 100%; text-align: center; font-size: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="640">
<tr>
<td align="left" valign="top" width="320">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 320px; min-width:220px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="320">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 320px; min-width:220px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>Two uneven columns
Section titled Two uneven columnsDefault
Section titled Default<tr>
<td style="padding: 25px 30px; background-color: #ffffff;" class="sm-p">
<div dir="ltr" style="display: table; width: 100%; text-align: center; font-size: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="620">
<tr>
<td align="left" valign="top" width="158">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; width: 158px; vertical-align: middle;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 15px; line-height: 140%; color: #3C3F44; text-align: left; padding: 5px 30px 5px 0;">
<img src="https://via.placeholder.com/128" width="128" height="128" alt="alt_text" border="0" style="display: block; margin: 0; font-family: arial, sans-serif; font-size: 15px; line-height: 15px; color: #3C3F44; margin: 0;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="462">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 462px; min-width:220px; vertical-align: middle;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>Reverse stacking
Section titled Reverse stacking
By default, columns are arranged based on source order on both desktop and mobile displays. (Eg. the first (left) desktop column will stack on top of the second (right) desktop column. Using the dir attribute, we can swap the order of columns on desktop without changing the source order. Useful when you want an image in the second (right) column on desktop, but on the first (top) row when stacked on mobile.
<tr>
<td style="padding: 25px 30px; background-color: #ffffff;" class="sm-p">
<div dir="rtl" style="display: table; width: 100%; text-align: center; font-size: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="620">
<tr>
<td align="left" valign="top" width="158">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; width: 158px; vertical-align: middle;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 15px; line-height: 140%; color: #3C3F44; text-align: left; padding: 5px 30px 5px 0;">
<img src="https://via.placeholder.com/128" width="128" height="128" alt="alt_text" border="0" style="display: block; margin: 0; font-family: arial, sans-serif; font-size: 15px; line-height: 15px; color: #3C3F44; margin: 0;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="462">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 462px; min-width:220px; vertical-align: middle;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>Three even columns
Section titled Three even columns<tr>
<td style="padding: 20px; background-color: #ffffff;">
<div style="display: table; width: 100%; text-align: center; font-size: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="640">
<tr>
<td align="left" valign="top" width="213">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 213px; min-width:150px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="213">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 213px; min-width:150px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="213">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 213px; min-width:150px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px;" class="sm-px-none">
…
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>