Grids

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.