What are Structures and Containers?

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:

• Stripe, a full-width horizontal section of the email (header, content, footer)
• Structure, defines the column layout within a stripe (1-column, 2-column, 3-column, etc.)
• Container, a single column within a structure, holding the actual content blocks
• Block, the content itself (text, image, button, spacer, divider, HTML, form, etc.)

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.

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:

• Drag from the sidebar, the "Structures" tab shows preset column layouts (1-col, 2-col equal, 2-col left-heavy, 3-col, 4-col, etc.)
• Drop into a stripe, drag the structure layout onto an existing stripe in the canvas

Structure Limits

• A stripe can contain up to 4 structures (rows)
• Each structure can have 1 to 9 containers (columns)
• Structures stack vertically within their parent stripe

Structure Types

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

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:

• Width, set as a pixel value or percentage of the structure
• Background color, a per-column background (different from the stripe background)
• Padding, internal spacing (top, right, bottom, left)
• Vertical alignment, align content to the top, middle, or bottom of the container
• Horizontal alignment, left, center, or right

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.

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>

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:

• Background color, independent of the stripe and structure background
• Padding, directional (top, right, bottom, left)
• Vertical alignment, top (default), middle, or bottom. Useful when adjacent columns have different content heights.

Structure Styles

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

• Background color, applies behind all containers
• Gutter, horizontal gap between columns (inter-column spacing)

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:

• 2+ column structures, columns stack vertically on screens below 600px
• Each container becomes full-width on mobile
• Block ordering is preserved, left column content appears before right column content
• Hide on Desktop / Hide on Mobile toggles on containers let you show different content on each device

8 Next Steps

• What are Smart Elements?, connect containers and structures to external data
• What are Data Sources?, power dynamic product grids with live data
• How to Test and Export AMP Emails, preview your layouts across email clients

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