Design Atlas
한국어
▦ Layout

Split screen

스플릿 스크린

A layout that divides the screen into two side-by-side (or stacked) panels, each carrying its own content or a contrasting message.

Also known as: Split layoutTwo-panel layout
···
html
<div class="split" id="split">
  <div class="pane left"><i class="ic"></i><i class="ln"></i><i class="ln s"></i></div>
  <div class="pane right"><i class="ln"></i><i class="ln s"></i><i class="btn"></i></div>
</div>
css
.split{display:flex;width:min(94%,560px);height:min(88%,260px);border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.pane{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:8%;
  transition:flex-grow .8s cubic-bezier(.2,.8,.2,1)}
.left{background:var(--accent);flex-grow:1}
.right{background:var(--surface);flex-grow:1}
.left .ic{width:22%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.85)}
.left .ln{height:8px;border-radius:3px;background:rgba(255,255,255,.7);width:70%}
.left .ln.s{width:45%}
.right .ln{height:8px;border-radius:3px;background:var(--line);width:80%}
.right .ln.s{width:55%}
.right .btn{margin-top:6px;width:46%;height:22px;border-radius:6px;background:var(--accent-3)}
js
const split = document.getElementById('split');
const left = split.querySelector('.left');
const right = split.querySelector('.right');
let toggled = false;
setInterval(() => {
  toggled = !toggled;
  left.style.flexGrow = toggled ? '1.5' : '1';
  right.style.flexGrow = toggled ? '0.7' : '1';
}, 1800);

The most common example is a login/signup page with a form on one side and brand imagery on the other. It also shows up on landing pages comparing two options side by side (personal vs. team pricing).

The basic build is display: flex with two children each set to flex: 1 for an even split (or flex: 1.2 / flex: .8 for an asymmetric one). On narrow screens it usually switches to flex-direction: column so neither panel gets squeezed too thin.

A dead-even 50/50 split can feel flat because neither side reads as the lead. In practice a slight tilt — 60/40, or something close to the golden ratio — is more common.