Columns
Multi-column layouts that stack on mobile.
Columns place content side by side. The outer columns container uses four colons; each column inside uses three:
:::: columns
::: column
:::
::: column
**New in July**
Fresh features you'll love.
:::
::::Columns are equal-width by default, render correctly in Outlook, and stack vertically on mobile automatically.
Inside a column you can use text, images, buttons, tables, dividers, and spacers; everything keeps its position within that column.
Column Parameters
Width
A bare number is a percentage; width= accepts a percent or pixel length:
:::: columns
::: column 30
Narrow sidebar
:::
::: column 70
Main content
:::
::::Alignment
left (default), center, right align the column's text, images, and buttons. valign= controls vertical alignment (top, middle, bottom) when columns have different heights:
:::: columns
::: column center valign=middle
Centered, vertically middled
:::
::: column
Taller content...
:::
::::Background
bg= gives a column a card-style background with inset padding (presets compact/spacious work like callout):
:::: columns
::: column bg=#eff6ff compact
A card cell
:::
::: column
Plain cell
:::
::::Text Color
color= overrides the text color for the column.
Container Parameters
Set on the outer columns container:
Gap
Space between columns, in pixels (default 16):
:::: columns gap=32
...
::::When columns stack on mobile, the gap between bg cards becomes vertical spacing. Use gap=0 for flush cards.
Mobile Stacking
Columns stack on small screens by default. Keep them side by side with stack=false:
:::: columns stack=false
::: column
🍎
:::
::: column
🍊
:::
::::With stack=false, use percentage widths only.
Notes
- Directives (callout, highlight, …) can't be nested inside columns; their content renders as regular text.
- In the plain-text version of the email, columns flatten to sequential content, left to right.