Skip to main content
You’ll sometimes need to create multi-column HTML email layouts. Here’s how to create a responsive email grid with Tailwind CSS in Maizzle.

​
Percentage

The simplest (and recommended) approach is to use Tailwind percentage widths: 
<table class="w-[600px] sm:w-full">
  <tr>
    <td class="w-4/12">4 cols</td>
    <td class="w-8/12">8 cols</td>
  </tr>
</table>
Tailwind comes configured with 2, 3, 4, 5, 6 and 12 column grids, so you can create columns with classes like w-2/3 or w-4/6.

​
Fixed

Of course, you can use fixed widths if you prefer. 
<table class="w-[600px] sm:w-full">
  <tr>
    <td class="w-[300px]">6 cols</td>
    <td class="w-[300px]">6 cols</td>
  </tr>
</table>

​
Stacking

Responsive HTML emails usually reset the columns to stack on mobile. We can easily achieve this with a couple utility classes. Using the percentage example, we might do: 
<table class="w-[600px] sm:w-full">
  <tr>
    <td class="w-4/12 sm:w-full inline-block">4 cols</td>
    <td class="w-8/12 sm:w-full inline-block">8 cols</td>
  </tr>
</table>
Some email clients strip the doctype of your email, which prevents inline-block from working on <td>. This can be fixed by using <th> instead, but requires resetting the font weight and text alignment: 
<table class="w-[600px] sm:w-full">
  <tr>
    <th class="w-4/12 sm:w-full inline-block font-normal text-left">4 cols</th>
    <th class="w-8/12 sm:w-full inline-block font-normal text-left">8 cols</th>
  </tr>
</table>
Need a custom column stacking order on mobile? See the reverse stack docs.

Build docs developers (and LLMs) love

Get started for freeTalk to us