MiN8T All Insights
Guide 10 min read

What are Structures and Containers?

M
MiN8T Team
Email Engineering
April 12, 2026

1 The 4-Level Hierarchy

Every MiN8T email template is built from a strict 4-level nesting hierarchy. Understanding this hierarchy is essential for creating well-structured, responsive emails:

Template
  └── Stripe (full-width section)
        └── Structure (column layout row)
              └── Container (single column)
                    └── Block (content: text, image, button, etc.)

Each level has a specific role:

This hierarchy maps directly to the HTML table structure that email clients expect: stripes become <table> sections, structures become <tr> rows, and containers become <td> cells.

i

This hierarchy is not just organizational — it's required by email HTML rendering. Email clients don't support CSS Grid or Flexbox. The table-based hierarchy ensures consistent rendering across Gmail, Outlook, Apple Mail, Yahoo, and hundreds of other clients.

2 What is a Structure?

A Structure is a row within a stripe that defines how many columns the row has and how wide each column is. Think of it as a layout grid for a single row of content.

Adding a Structure

In the editor, you can add structures in two ways:

Structure Limits

Structure Types

MiN8T recognizes several common structure patterns based on column count and width ratios:

Type Columns Layout
1-col 1 Full width
2-col 2 Equal width (50/50)
2-col-left 2 Left column wider
2-col-right 2 Right column wider
3-col 3 Equal thirds
4-col 4 Equal quarters
N-col 5–9 Custom widths

3 What is a Container?

A Container is a single column within a structure. It holds the actual content blocks — text, images, buttons, spacers, dividers, forms, and more.

Container Properties

Each container can be styled independently:

Adding Blocks to a Container

Drag blocks from the block palette into a container. Blocks stack vertically within the container in the order they appear. You can reorder blocks within a container by dragging them up or down.

✓

A container can hold any number of blocks. Unlike structures (max 4 per stripe) and containers (max 9 per structure), there's no hard limit on blocks within a container. However, keep emails concise for better engagement.

4 Multi-Column Layouts

Multi-column layouts are achieved by adding structures with multiple containers. Common patterns:

Product Grid (2 or 3 columns)

Drag a 2-col or 3-col structure. Each container holds a product card: image block, text block (title), text block (price), and button block (CTA). All three columns are styled identically for a clean grid.

Sidebar Layout (2 columns, unequal)

Drag a 2-col-left structure. The wider left column holds the main content (article text, hero image). The narrower right column holds navigation links, social icons, or a small ad.

Feature Comparison (3 or 4 columns)

Drag a 3-col or 4-col structure. Each column represents a pricing tier or feature set. Add heading, text, and button blocks to each.

How It's Rendered

MiN8T generates proper email-safe HTML using table-based layouts with Outlook conditional comments (VML) for consistent rendering:

<!-- Structure: 2 columns -->
<table class="es-content" cellpadding="0" cellspacing="0" width="600">
  <tr>
    <!--[if mso]><table cellpadding="0" cellspacing="0"><tr>
      <td width="300" valign="top"><![endif]-->
    <td class="esd-container-frame" width="300" valign="top">
      <!-- Container 1 blocks -->
    </td>
    <!--[if mso]></td><td width="300" valign="top"><![endif]-->
    <td class="esd-container-frame" width="300" valign="top">
      <!-- Container 2 blocks -->
    </td>
    <!--[if mso]></td></tr></table><![endif]-->
  </tr>
</table>
!

Outlook uses the Word rendering engine, which doesn't support modern CSS. MiN8T generates VML conditional comments (<!--[if mso]>) to ensure multi-column layouts render correctly in Outlook 2007–2019 and Microsoft 365.

5 Adjusting Column Widths

Column widths can be adjusted in several ways:

Preset Layouts

Choose from the sidebar's preset structure types. These set standard width ratios (e.g., 50/50 for 2-col, 33/33/33 for 3-col, 66/33 for 2-col-left).

Drag to Resize

Hover between two columns on the canvas. A resize handle appears. Drag left or right to adjust the column widths. The total width remains constant — widening one column narrows its neighbor.

Pixel-Precise Control

In the structure's property panel, set exact pixel widths for each container. The standard email content width is 600px, so a 2-column layout might be 300/300, 400/200, or any combination that totals the structure width.

6 Container & Structure Styling

Container Styles

Select a container by clicking on it in the canvas. The property panel shows:

Structure Styles

Select a structure (hover over it and click the structure outline). Properties include:

Smart Elements on Containers & Structures

Both containers and structures can be designated as Smart Elements. When connected to a data source, the SMART badge appears on the element's toolbar, and the Data tab becomes available in the property panel.

7 Responsive Behavior

On mobile devices, multi-column layouts typically stack vertically. MiN8T handles this through responsive CSS that's included in the exported HTML:

i

The responsive behavior is automatic. You don't need to create separate mobile layouts. The same template adapts to all screen sizes using media queries in the exported HTML.

8 Next Steps

Last updated: April 2026. All details verified against MiN8T's actual codebase implementation.