---
name: Split screen layout
slug: split-screen-layout
category: layout
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: A page cut into two equal full height halves, each carrying its own
  message or path, with no hierarchy between them.
aliases:
  - name: split design
    source: community
  - name: 50/50 layout
    source: community
  - name: dual pane hero
    source: community
tags:
  - grids
relations:
  contrastWith:
    - split-view
    - zigzag-layout
  variantOf: []
  partOf: []
  seeAlso:
    - hero
implementations: []
sources: []
demo: inline
exhibit: false
useWhen: two equally weighted choices on one page
---

Cut the page down the middle, give each half its own image, headline, and button, and the
layout has said something before a word is read: there are two of these, and neither one is
the main one. That is the whole idea. A split screen is for a genuine fork, men and women,
book a room and book a table, sign in and sign up, where picking a hero image and a single
call to action would be answering a question the visitor is there to answer.

The symmetry has to be real to work. Equal widths, matching type sizes, buttons of the same
weight, and images of similar density, because the moment one half is louder the layout
stops being a choice and becomes a main offer with a footnote. Two halves is also the
practical limit: three is a set of cards, and by four the reader is scanning a grid rather
than choosing between paths. If the two things are not actually peers, a hero with a
secondary action says so more honestly.

It is easy to confuse with [list detail](/list-detail), and the difference is the
relationship rather than the shape. In a list detail the two panes are bound together, and
what you pick on the left decides what the right shows; in a split screen neither half
knows the other exists. The same words are also used for a third thing entirely, the
operating system feature that runs two applications side by side on one screen, which is a
window manager's split view rather than a page layout, so the sense is usually worth
stating out loud.

At narrow widths the halves stack, and the order they stack in is a decision, not a
default: the top one now reads as first choice and gets seen far more, which is the
hierarchy the layout spent its whole design avoiding. Alternating which half leads, or
shortening both so the second is still on the first screen, keeps the pairing from
collapsing into a ranking. Watch text over imagery too, since a headline that clears
[contrast](/contrast-ratio) against a light photograph on one side often fails against a
dark one on the other.