Split Screen
A two-panel layout dividing the viewport equally or asymmetrically — effective for comparisons, auth flows, and onboarding.
Plain English
Split screen signals equal weight or deliberate contrast. Authentication pages (form on the right, brand visual on the left) use it because the visual makes the page feel like a product, not a form. Comparison pages (Free vs Pro, Before vs After) use it because placing options side-by-side externalizes the decision — users can see the difference without memory. The key rule: on mobile, split screen must stack vertically, and the primary content (the form, the selected option, the current step) must come first in DOM order and appear above the fold.
Technical
CSS Grid: display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh. Asymmetric: grid-template-columns: 2fr 3fr. Each panel: height: 100% or min-height: 100vh. Responsive: @media (max-width: 768px) { grid-template-columns: 1fr; }. Sticky side panel: position: sticky; top: 0; height: 100vh; overflow: hidden on the decorative column.
Live Demo
Radii
The UI/UX Design Playbook for modern teams.
Sign in
Split screen signals contrast or equal weight — on mobile, stack vertically with primary content first.
Usage
✓ Good usage
A SaaS login page with the brand color and product screenshot on the left, the login form on the right — the split communicates "this is a real product" before the user even starts typing.
✗ Bad usage
A split-screen layout on mobile that puts the 400px decorative illustration above the fold, pushing the actual form below the fold — users see no purpose before abandoning.
Recommended values
- Grid columns: 1fr 1fr (equal) or 2fr 3fr (asymmetric)
- Mobile: single column with primary content first
- Min-height: 100vh on each panel for fullscreen splits
- Left panel (decorative): overflow: hidden to contain imagery
- Divider gap: 0 or 1–2px for a clean edge
- Responsive breakpoint: 768px to stack
Common mistakes
- Primary content second in DOM — screen readers and mobile scroll order should hit the form/action before the illustration.
- No mobile breakpoint — a split-screen at 375px gives each panel only 187px width, making both panels cramped.
- Mismatched heights — if one panel is shorter, the layout breaks; use min-height: 100% on both.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Build a split-screen auth layout. Left panel: brand color background, centered logo and tagline. Right panel: white background with login form centered vertically. Use CSS grid with 1fr 1fr columns. On mobile (< 768px): hide the left panel, show only the form. Ensure the form is first in DOM order.