Seven split screen layouts: a sign-up page with a brand image half, a split hero, a choice between two audiences, halves that expand when hovered, a sticky picture beside scrolling text, a diagonal split and a section that puts the image first on phones.
One half is a brand image with a short quote, the other is the form. Below 480px of container width the image half shrinks to a banner above the form so the form is never pushed off screen on a phone.
View code
<div class="spl1"><div class="in"><div class="art"><p>“The fastest checkout we have used.”</p></div><form><h3>Create your account</h3><label>Email<input type="email" autocomplete="email"></label><label>Password<input type="password" autocomplete="new-password"></label><button type="button">Sign up</button></form></div></div>
A full-height hero divided into a text half and a visual half, with the text vertically centred. The visual is a bleed panel that touches the edges, which feels more confident than an image floating in a box.
View code
<section class="spl2"><div class="in"><div class="tx"><p class="k">New</p><h3>Notes that organise themselves</h3><a href="#try">Try it free</a></div><div class="vis" aria-hidden="true"><span></span><span></span><span></span></div></div></section>
A split for two audiences, such as buyers and sellers, with a dark half and a light half, each with its own heading and link. The halves are equal flex items, so they share the width and stack when there is no room.
View code
<div class="spl3"><a class="d" href="#buy"><b>I want to buy</b><span>Browse 4,000 makers →</span></a><a class="l" href="#sell"><b>I want to sell</b><span>Open a shop in minutes →</span></a></div>
Two halves share the space equally until one is hovered or focused, when it grows to take two thirds. The halves are flex items whose flex-grow transitions, so the whole thing is two lines of CSS on top of the layout.
View code
<div class="spl4"><a href="#city" style="--g:linear-gradient(160deg,#6366f1,#1e1b4b)"><b>City breaks</b></a><a href="#coast" style="--g:linear-gradient(160deg,#06b6d4,#164e63)"><b>Coast and islands</b></a></div>
A product story where the picture half stays put while the text half scrolls through the details, the layout of many launch pages. The picture column is position: sticky with align-self: start inside the grid.
View code
<div class="spl5" tabindex="0" role="region" aria-label="Product story, scroll"><div class="in"><div class="pic" aria-hidden="true"></div><div class="tx"><h3>The everyday pack</h3><p>Recycled ripstop shell that shrugs off rain.</p><p>A padded sleeve that fits a 16-inch laptop.</p><p>Hidden pocket for your passport.</p><p>Straps that tuck away for flights.</p></div></div></div>
Two panels divided by a slanted line instead of a straight one. The coloured panel is clipped with a polygon so its edge leans, and the text sits in its own grid cell so it never runs into the slope.
View code
<section class="spl6"><div class="a"><h3>Before</h3><p>Manual exports every Monday.</p></div><div class="b"><h3>After</h3><p>Reports land in your inbox at 8am.</p></div></section>
On wide screens the text is on the left and the image on the right, but on phones the image comes first so people see what the section is about before reading. The order is changed with grid placement, not by duplicating the image.
View code
<section class="spl7"><div class="in"><div class="tx"><h3>Ride further</h3><p>Our e-bike battery lasts 120 km on a single charge.</p></div><div class="im" role="img" aria-label="Electric bike on a coastal road"></div></div></section>
A split screen works when each half does one thing: one shows, the other tells or asks. If both halves compete for attention, the page loses its focus.
Plan the mobile stack
Every split becomes a stack on a phone. Decide which half comes first, and shrink decorative halves to a banner rather than a full screen so the useful half is not pushed out of view.
Equal halves with flex or grid
grid-template-columns: 1fr 1fr gives exact halves; flex items with flex: 1 share space and can grow on hover by transitioning flex-grow.
Keep text off busy images
Put text in its own half rather than over the picture. When text must sit on an image, add a scrim so it keeps enough contrast.
Frequently asked questions
Should both halves be full height?
On wide screens it looks strong; on phones let the halves size to their content.
How do I make one side stay while the other scrolls?
Make the media column position: sticky with align-self: start, as the sticky demo does.
Are diagonal splits accessible?
Yes, they are only a visual edge; keep the text clear of the slope.