Columns Block
Create side-by-side layouts with 2-column or 3-column containers. Each column can hold any content blocks.
Types
| Block | Layout | Best for |
|---|---|---|
| Columns (2-col) | 50/50 split | Image + text, feature pairs, comparison |
| Columns (3-col) | 33/33/33 split | Feature grids, product listings, icon groups |
Properties
| Property | Options |
|---|---|
| Column widths | Equal or custom ratio |
| Gap | Space between columns |
| Vertical alignment | Top, Middle, Bottom |
| Background | Per-column background color |
| Padding | Per-column padding |
Responsive behavior
On mobile screens (under 480px), columns automatically stack vertically: Column 1 appears above Column 2. This ensures readability on small screens.
Common patterns
Hero with image + text
Columns (2-col)
Column 1: Image (product screenshot)
Column 2: Heading + Text + Button
Feature grid
Columns (3-col)
Column 1: Icon + Feature title + Description
Column 2: Icon + Feature title + Description
Column 3: Icon + Feature title + Description
Testimonial
Columns (2-col)
Column 1: Avatar (small circular image)
Column 2: Quote text + Author name
Note
Outlook desktop uses the Word rendering engine which has limited support for multi-column layouts. Test your email in Outlook if it's a significant part of your audience.