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:

4 cols8 cols
<table class="w-600 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.

Full Grid

Here's how the full grid looks like:

w-1/12
w-2/12
w-3/12
w-4/12
w-5/12
w-6/12
w-7/12
w-8/12
w-9/12
w-10/12
w-11/12
w-full

Fixed

Of course, you can use fixed widths if you prefer.

For example, imagine we registered '272': '272px' in the spacing section of Tailwind. We could then create two fixed width columns like this:

6 cols6 cols
<table class="w-600 sm:w-full">
  <tr>
    <td class="w-272">6 cols</td>
    <td class="w-272">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.

Consider the percentage example above:

4 cols8 cols
<table class="w-600 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>