foundation-emails/test/visual/pages/grid.html

A framework for responsive emails

<table class="container">
  <tr>
    <td>

      <table class="row">
        <tr>
          <th class="columns first">
            Thing 1
          </th>
          <th class="columns">
            Thing 2
          </th>
          <th class="columns last">
            Thing 3
          </th>
        </tr>
      </table>

      <table class="row collapse">
        <tr>
          <th class="small-12 large-12 columns first last">
            <p>This is a collapse column sit amet, consectetur adipisicing elit. Totam aliquid tenetur dignissimos repellendus sapiente reprehenderit vero, possimus omnis necessitatibus ad, debitis, distinctio ea laudantium. Corrupti veniam harum sint, laboriosam aut.</p>
          </th>
        </tr>
      </table>

      <table class="row">
        <tr>
          <th class="small-12 large-6 columns first">
            <p>One Word</p>
          </th>
          <th class="small-12 large-6 columns last">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam impedit odit cum, nemo qui corporis similique placeat aut inventore voluptas debitis ratione deleniti sequi, cumque eos animi perspiciatis sunt.</p>
          </th>
        </tr>
      </table>


      <table class="row">
        <tr>
          <th class="small-12 large-2 columns first">
            <table>
              <tr>
                <th>
                  <p>One word</p>
                </th>
                <th class="expander"></th>
              </tr>
            </table>
          </th>
          <th class="small-12 large-4 columns">
            <table>
              <tr>
                <th>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero enim eos ullam pariatur doloremque voluptatibus, modi repellat porro beatae provident dicta quidem rerum dolor nesciunt magnam ipsum illo cupiditate iusto.</p>
                </th>
                <th class="expander"></th>
              </tr>
            </table>
          </th>
          <th class="small-12 large-6 columns last">
            <table>
              <tr>
                <th>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est amet ut placeat vel hic corporis impedit delectus suscipit voluptatibus itaque, obcaecati sapiente sint cupiditate magni fugit ducimus error quae molestiae.</p>
                </th>
                <th class="expander"></th>
              </tr>
            </table>
          </th>
        </tr>
      </table>

      <table class="row">
        <tr>
          <th class="small-12 large-2 columns first">
            <table>
              <tr>
                <th>
                  <p>One word</p>
                </th>
                <th class="expander"></th>
              </tr>
            </table>
          </th>
          <th class="small-4 large-4 columns">
            <table>
              <tr>
                <th>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet rerum, cumque. Esse dolorem voluptatibus deserunt facere earum explicabo ducimus minus incidunt sunt aliquam animi fugiat, alias debitis quas molestiae quaerat.</p>
                </th>
                <th class="expander"></th>
              </tr>
            </table>
          </th>
          <th class="small-8 large-6 columns last">
            <table>
              <tr>
                <th>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea commodi quis quae iusto, blanditiis amet repudiandae ipsam, saepe, minus nulla repellat consectetur impedit. Sequi ratione iste doloribus, ab dignissimos quibusdam.</p>
                </th>
                <th class="expander"></th>
              </tr>
            </table>
          </th>
        </tr>
      </table>
    </td>
  </tr>
</table>