Canvas & Layout#
Core canvas specifications and layout grids for Xiaohongshu infographics.
Aspect Ratios#
| Name | Ratio | Pixels | Note |
|---|
| portrait-3-4 | 3:4 | 1242×1660 | Highest traffic on XHS (recommended) |
| square | 1:1 | 1242×1242 | Second recommended |
| portrait-2-3 | 2:3 | 1242×1863 | Taller format |
Default: portrait-3-4 for maximum engagement.
Safe Zones#
Avoid placing critical content in these areas:
| Zone | Position | Reason |
|---|
| bottom-overlay | Bottom 10% | Title bar overlay on mobile |
| top-right | Top-right corner | Like/share button overlay |
| bottom-right | Bottom-right corner | Watermark position |
┌─────────────────────────────┐
│ [like/share]│ ← top-right: avoid
│ │
│ │
│ ✓ SAFE CONTENT AREA │
│ │
│ │
│ [title bar overlay area] │ ← bottom 10%: avoid key info
└─────────────────────────────┘
Grid Layouts#
Density-Based Layouts#
| Layout | Info Density | Whitespace | Points/Image | Best For |
|---|
| sparse | Low | 60-70% | 1-2 | Covers, quotes, impactful statements |
| balanced | Medium | 40-50% | 3-4 | Standard content, tutorials |
| dense | High | 20-30% | 5-8 | Knowledge cards, cheat sheets |
Structure-Based Layouts#
| Layout | Structure | Items | Best For |
|---|
| list | Vertical enumeration | 4-7 | Rankings, checklists, step guides |
| comparison | Left vs Right | 2 sections | Before/after, pros/cons |
| flow | Connected nodes | 3-6 steps | Processes, timelines, workflows |
| mindmap | Center radial | 4-8 branches | Concept maps, brainstorming, topic overview |
| quadrant | 4-section grid | 4 sections | SWOT analysis, priority matrix, classification |
Layout by Position#
| Position | Recommended Layout | Why |
|---|
| Cover | sparse | Maximum visual impact, clear title |
| Setup | balanced | Context without overwhelming |
| Core | balanced/dense/list | Based on content density |
| Payoff | balanced/list | Clear takeaways |
| Ending | sparse | Clean CTA, memorable close |
Grid Cells#
For multi-element compositions:
| Name | Cells | Use Case |
|---|
| single | 1 | Hero image, maximum impact |
| dual | 2 | Before/after, comparison |
| triptych | 3 | Steps, process flow |
| quad | 4 | Product showcase |
| six-grid | 6 | Checklist, collection |
| nine-grid | 9 | Multi-image gallery |
Visual Balance#
Sparse Layout#
- Single focal point centered
- Breathing room on all sides
- Symmetrical composition
Balanced Layout#
- Top-weighted title
- Evenly distributed content below
- Clear visual hierarchy
Dense Layout#
- Organized grid structure
- Clear section boundaries
- Compact but readable spacing
List Layout#
- Left-aligned items
- Clear number/bullet hierarchy
- Consistent item format
Comparison Layout#
- Symmetrical left/right
- Clear visual contrast
- Divider between sections
Flow Layout#
- Directional flow (top→bottom or left→right)
- Connected nodes with arrows
- Clear progression indicators
Mindmap Layout#
- Central topic node
- Radial branches outward
- Hierarchical sub-branches
- Organic curved connections
Quadrant Layout#
- 4-section grid (2×2)
- Clear axis labels
- Each quadrant with distinct content
- Optional circular variant for cycles
