Create visual tension and narrative flow by dividing the viewport into contrasting sections.
The split layout creates a powerful visual dichotomy, perfect for comparing options, telling stories, or highlighting key information.
High contrast pairs for maximum impact
Dark
#0f0f0f
Light
#ffffff
Red
#ff4757
Green
#2ed573
Blue
#1e90ff
Perfect for individuals
For growing teams
Key principles for Split Screen layouts
grid grid-cols-1 lg:grid-cols-2 实现分屏
小屏幕下自动变为上下堆叠
左右面板使用对比色增强视觉张力
保持两侧内容的视觉重量平衡
min-h-screen 确保占满视口
flex items-center justify-center 内容居中
Visual Panel
Unequal splits create visual hierarchy, giving more emphasis to one side. Use 60/40 or 70/30 ratios for emphasis.
When to use Split Screen layout
Image on one side, details on the other
Side-by-side feature or pricing comparison
Visual narrative with supporting content
Hero sections with split visual impact