Layout6 min read•Audience: All, Designers
Columns (mj-column)
Create multi-column layouts, set column width percentages, adjust vertical alignment, and control mobile stacking.
Key Takeaways
- Columns split sections horizontally into 1, 2, 3, or 4 cells.
- Customize column widths using exact percentages (e.g., 50/50, 70/30, 25/75, 33/33/33).
- Set vertical alignment to top, middle, or bottom to align side-by-side elements gracefully.
- Columns automatically stack to 100% width on mobile screens for easy reading.
Available Column Splits#
PostBrix provides standard multi-column layout presets:
- 1 Column (100%): The standard full-width layout for narrative text, hero banners, and transactional receipts.
- 2 Columns (50% / 50%): Ideal for side-by-side product cards, image + text pairings, and two-column statistics.
- 2 Columns Asymmetric (30% / 70% or 70% / 30%): Perfect for a sidebar navigation pattern, author bio with avatar, or order summary with thumbnail.
- 3 Columns (33.3% each): Great for feature highlights, customer testimonials, and icon grids.
- 4 Columns (25% each): Best suited for social media icon bars, sponsor logos, and compact product catalogs.
Vertical Alignment#
When columns in the same section have differing heights (for example, a tall portrait image next to a short paragraph), you can control how they align:
- Top (
vertical-align="top"): Aligns the tops of both columns. This is the most common and readable setting. - Middle (
vertical-align="middle"): Centers columns vertically relative to each other. Perfect for vertically centering a button or short text block next to a hero image. - Bottom (
vertical-align="bottom"): Aligns columns along their bottom baseline.
Inner Column Padding & Spacing#
To ensure multi-column layouts don't touch awkwardly:
- Apply horizontal padding (e.g.
padding="0 15px") to each column. - In desktop view, this creates a clean 30px visual gutter between the columns.
- When stacked on mobile, the horizontal padding prevents text from pressing against screen edges.
Frequently Asked Questions
Why do my two columns stack vertically on my phone?
Responsive media queries expand columns to 100% width on screens below 480px to ensure text is legible without zooming. You can disable stacking on specific sections by enabling the "Don't stack on mobile" option.
Can I set custom column widths like 60% and 40%?
Yes. Select the column on the canvas and enter custom percentage widths directly in the properties inspector.