Layout Architecture & Grid System
Understand the hierarchical layout system of PostBrix: why emails require a strict Section-Column grid and how container widths work.
Key Takeaways
- Emails use a strict 3-tier hierarchy: Section (row container) → Column (horizontal split) → Block (content element).
- The standard 600px email container width guarantees maximum compatibility across desktop clients (Outlook, Apple Mail) and mobile screens.
- Content blocks cannot be placed directly on the root canvas — they must always reside inside a Column.
- Sections can be full-width (background color spans viewport) while keeping inner content centered at 600px.
The 3-Tier Layout Hierarchy#
Unlike modern web pages that use CSS Grid or Flexbox, email clients (especially desktop Outlook 2016–2021) rely on traditional HTML <table> structures.
To ensure your email renders identically in every inbox, PostBrix enforces a strict 3-tier hierarchy:
- Section (
mj-section): A horizontal band spanning the email width. Sections define background colors, background images, and vertical padding. - Column (
mj-column): A vertical cell within a Section. Columns determine horizontal splits (such as 50/50 two-column or 33/33/33 three-column layouts) and define mobile stacking order. - Block (Leaf Nodes): The actual content elements (Text, Image, Button, Spacer, Divider) that sit inside Columns.
Why Strict Hierarchy Matters
The 600px Container Standard#
By default, PostBrix sets the email content container width to 600px.
Why 600px?
- Desktop Inboxes: Outlook and webmail clients (like Gmail or Yahoo) typically display emails inside a preview pane that is 600px–700px wide. An email wider than 650px will cause horizontal scrollbars or side clipping.
- Line Length Readability: At standard font sizes (14px–18px), a 600px column provides 50–75 characters per line, which is the typographic sweet spot for reading comprehension.
- Mobile Fluidity: On mobile viewports (<480px), PostBrix automatically sets columns to 100% width, stacking them vertically for an optimal single-column reading experience.
Boxed vs. Full-Width Sections#
When configuring a Section in the Properties panel, you can choose between two rendering modes:
- Boxed (Default): The background color and content are both constrained to the 600px container. The outer canvas background surrounds the entire email.
- Full-Width Stretch: The section background color or background image extends 100% across the user's entire email client window, while the inner columns remain centered at 600px. This is ideal for colored navigation headers, hero banners, and dark footers.
Frequently Asked Questions
Why cannot I drop a button or text block directly on the canvas without a Section?
Because email rendering engines require table rows and cells for horizontal alignment. Wrapping every block in an mj-column inside an mj-section guarantees that table tags compile cleanly with Outlook conditional comments.
Can I increase my email container width to 800px?
While you can adjust container widths in template settings, widths exceeding 650px risk horizontal scrollbars in desktop Outlook and split-screen webmail preview panes.