<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Email Framework - HTML Email Fluid Grid Layout</title>
  <style type="text/css">

    /* TESTING GRID VIEW */
    table td { border:1px #47B39D solid; }

    /* CLIENT-SPECIFIC STYLES */
    body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
    img { -ms-interpolation-mode: bicubic; }
		    
    /* RESET STYLES */
    img { border: 0; line-height: 100%; outline: none; text-decoration: none; }
    table { border-collapse: collapse !important; }
    body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

  </style>    
</head>
<body style="background-color:#ECF0F1; font-family: Arial, sans-serif;">
  <center>

    <div style="background-color:#ECF0F1; max-width: 640px; margin: auto;">
      <!--[if mso]>
      <table role="presentation" width="640" cellspacing="0" cellpadding="0" border="0" align="center">
      <tr>
      <td>
      <![endif]-->

      	<!-- Start Grid 1 -->
      	<table role="presentation" width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
      		<tr>
      			<td align="center" valign="top" style="padding:10px;">
      				
      				<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
      					<tr>
      						<td align="center" valign="top" style="padding:10px;">
      							Grid 1
      						</td>
      					</tr>
      				</table>

      			</td>
      		</tr>
      	</table>
      	<!-- End Grid 1 -->

      	<!-- Start Grid 2 -->
      	<table role="presentation" width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
      		<tr>
      			<td align="center" valign="top" style="padding:10px;">
      				
      				<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
      					<tr>
      						<td width="300" align="center" valign="top" style="padding:10px;">
      							Grid 2
      						</td>
      						<td width="300" align="center" valign="top" style="padding:10px;">
      							Grid 2
      						</td>
      					</tr>
      				</table>

      			</td>
      		</tr>
      	</table>
      	<!-- End Grid 2 -->

      	<!-- Start Grid 3 -->
      	<table role="presentation" width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
      		<tr>
      			<td align="center" valign="top" style="padding:10px;">
      				
      				<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
      					<tr>
      						<td width="200" align="center" valign="top" style="padding:10px;">
      							Grid 3
      						</td>
      						<td width="200" align="center" valign="top" style="padding:10px;">
      							Grid 3
      						</td>
      						<td width="200" align="center" valign="top" style="padding:10px;">
      							Grid 3
      						</td>
      					</tr>
      				</table>

      			</td>
      		</tr>
      	</table>
      	<!-- End Grid 3 -->

      	<!-- Start Grid 4 -->
      	<table role="presentation" width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
      		<tr>
      			<td align="center" valign="top" style="padding:10px;">
      				
      				<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
      					<tr>
      						<td width="150" align="center" valign="top" style="padding:10px;">
      							Grid 4
      						</td>
      						<td width="150" align="center" valign="top" style="padding:10px;">
      							Grid 4
      						</td>
      						<td width="150" align="center" valign="top" style="padding:10px;">
      							Grid 4
      						</td>
      						<td width="150" align="center" valign="top" style="padding:10px;">
      							Grid 4
      						</td>
      					</tr>
      				</table>

      			</td>
      		</tr>
      	</table>
      	<!-- End Grid 4 -->

      	<!-- Start Grid 5 -->
      	<table role="presentation" width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%;" bgcolor="#FFFFFF">
      		<tr>
      			<td align="center" valign="top" style="padding:10px;">
      				
      				<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:600px; width:100%;">
      					<tr>
      						<td width="120" align="center" valign="top" style="padding:10px;">
      							Grid 5
      						</td>
      						<td width="120" align="center" valign="top" style="padding:10px;">
      							Grid 5
      						</td>
      						<td width="120" align="center" valign="top" style="padding:10px;">
      							Grid 5
      						</td>
      						<td width="120" align="center" valign="top" style="padding:10px;">
      							Grid 5
      						</td>
      						<td width="120" align="center" valign="top" style="padding:10px;">
      							Grid 5
      						</td>
      					</tr>
      				</table>

      			</td>
      		</tr>
      	</table>
      	<!-- End Grid 5 -->

      <!--[if mso]>
      </td>
      </tr>
      </table>
      <![endif]-->
    </div>

	</center>
</body>
</html>
