22 CSS Split Screen Layouts

Start with the job the section does. If two options need direct comparison — two properties, two plans, before/after — use a symmetric 50/50 grid so the eye can dart between them without one side pulling harder. If one side is the subject and the other is context, use 70/30 or 60/40; the wide side gets the headline, the narrow side gets metadata. If the section is a hero with a visual on one side and a form or CTA on the other, 55/45 in favor of the visual tests best for conversion on tier-1 SaaS pages. Avoid symmetric 50/50 for hero-with-form — it makes the form feel like it's competing with the visual. For editorial storytelling with a large image and long-form text, use 45/55 in favor of the text and let a single hero image cross the boundary with overflow: visible; the visual break signals magazine-style prestige. For before/after comparisons where users need to see both states at once, use a single overlay with a draggable clip-path slider rather than two side-by-side panels — a slider ships two full views in the same box and lets users control the reveal precisely. Every pattern in this collection uses CSS Grid on the outer wrapper with a @media (max-width: 640px) { grid-template-columns: 1fr } block so mobile stacks vertically.

Modern CSS makes grid-template-columns animatable when both keyframes use the same unit type — same fr, or same percentages. Set the wrapper to display: grid; grid-template-columns: 1fr 1fr; transition: grid-template-columns 400ms cubic-bezier(0.4, 0, 0.2, 1), then on hover or via :has(:checked) retarget to 1.85fr 1fr. The grid tracks tween smoothly and the child content reflows as its column expands. This lands in Chrome 111+, Firefox 128+, Safari 17.4+. On older browsers the resize snaps between states with no animation — the interaction still works, just abruptly, which reads as intentional design. Pair with @media (hover: hover) to skip the hover trigger on touch devices (where :hover sticks after tap), and add a keyboard equivalent by giving each panel tabindex='0' and mirroring the :hover rule with :focus-visible. For radio/checkbox-driven toggles like the Two Seasons demo, hide the input with position: absolute; opacity: 0, style a label as the visible target, and gate the parent grid with .wrapper:has(#option:checked) { grid-template-columns: 65% 35%; }. Wrap the transition in @media (prefers-reduced-motion: no-preference) so vestibular-sensitive users get an instant snap rather than a swept resize.

Two absolutely positioned panels sit inside a position: relative stage with isolation: isolate so the stacking context stays contained. Both panels fill the stage with inset: 0. The first panel gets clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%) to carve the left-leaning trapezoid; the second gets the inverse polygon(60% 0, 100% 0, 100% 100%, 40% 100%). Because both panels occupy the same box, the diagonal seam is mathematically identical and never shows a hairline gap — no anti-aliasing artifact, no sub-pixel bleed. Text inside each panel uses normal flow with padding, so headings sit safely inside the visible polygon rather than fighting the diagonal edge. Two real gotchas: text in the clipped-away region is still selectable because clip-path only affects paint (not hit testing), so keep body copy padded well inside the visible area; and the panels need an explicit min-height on the wrapper or they collapse to zero and the whole component disappears silently. On mobile below 640px, swap the polygon to none and stack the panels vertically — diagonal seams produce awkward triangular slivers on narrow viewports. Baseline in Chrome 55+, Safari 14.1+, Firefox 54+ — safe for every tier-1 audience.

Stack two panels in the same grid cell using grid-area: 1 / 1. The top panel gets clip-path: inset(0 calc(100% - var(--pos)) 0 0) so it's revealed only up to the --pos value. Overlay an <input type='range' value='50' min='0' max='100'> across the wrapper with position: absolute; inset: 0; opacity: 0, catching drag events across the whole surface. Under 20 lines of JavaScript listen for input and write e.target.parentElement.style.setProperty('--pos', e.target.value + '%'). A vertical handle uses left: var(--pos); transform: translateX(-50%) and pointer-events: none so drags pass through to the range beneath. Accessibility essentials: set step='5' on the range (default 1% requires 100 arrow-key presses to cross the panel), add aria-label describing what's being compared ("Before and after treatment"), and skip transitioning clip-path — cheap Android GPUs jank on clip-path animation. Baseline in Chrome 55+, Safari 9.1+, Firefox 54+. Real estate compare tools (Zillow, Redfin, Compass) and photo editing tutorials (Photoshop, Lightroom demos) use this exact pattern; average CPM $15-30 on real estate metros, $8-15 on tech-tutorial content.

The canonical SaaS split hero is 55/45 in favor of the product visual, with the form panel on the trailing side. Structure: <section aria-label='Sign in'> as the outer landmark, then a display: grid; grid-template-columns: 55% 45%; min-height: 100vh wrapper. The visual panel paints its hero with a layered background-image — radial-gradient highlight over a linear-gradient base — so it ships without an image asset; brand copy floats bottom-left via align-self: end on the grid child. The form panel uses display: flex; flex-direction: column; gap: 1.25rem with inputs styled through :focus-visible rings at 3:1 contrast per WCAG 2.4.13. Include autocomplete='email' and autocomplete='current-password' attributes or password managers silently break. The social row uses display: grid; grid-template-columns: repeat(3, 1fr) for OAuth providers. Below 52rem the grid collapses and the product panel becomes a short banner — or hide it entirely with display: none under 36rem so the form is immediately actionable on phones. SaaS auth pages carry $8-25 CPM on Google Ads for developer keywords; the form-first mobile pattern lifts conversion 20-40% vs a full-height visual that pushes the form below the fold. This is the layout Stripe Checkout, Linear login, Framer sign-in, and Vercel dashboard auth all ship.

The wrapper is a two-column grid using grid-template-columns: 1fr 1fr with a fixed viewport height, so each panel becomes an independent scroll container via overflow-y: auto. Each side holds a property card built from a stacked flex column: hero photo (16:10 aspect-ratio for consistent card height across property photos), price row, and a stats grid with beds, baths, and square footage rendered through grid-template-columns: repeat(3, 1fr). A center border-inline-start on the right panel provides the visual seam. Independent scroll containers mean aligned rows drift as users scroll one side — that's a feature, not a bug, because the point is direct comparison at each user's own pace. Highlight the winning field per row (lower price, more square footage) with a :has() selector on the stats grid, or precompute a data-winner attribute at build time. Add scroll-snap-type: y mandatory on each panel plus scroll-snap-align: start on stat rows so scrolling settles on comparable sections instead of arbitrary offsets. Real estate is a $15-30 CPM vertical on Google Ads (metro markets), $25-50 on tier-1 city luxury, and $30-60 on Manhattan / Bay Area / London prime. Fair Housing Act compliance (42 U.S.C. § 3604) requires that comparison tools don't steer users toward or away from properties based on protected characteristics — keep the fields you compare limited to objective property attributes (price, size, beds/baths), not location-neighborhood ratings that could function as proxies.

The spread uses grid-template-columns: 45% 55% in favor of the article text, with overflow: visible on both the wrapper AND the left panel so a centerpiece image can cross the boundary. The image is an absolutely positioned <img> inside the left panel with right: -20%; z-index: 2, pushing it into the right panel's territory. The headline is a separate absolutely positioned <h2> anchored to the grid wrapper with left: 30%; right: 10%, so it visually spans both panels while remaining a single semantic heading. Serif typography carries the editorial feel — font-family: 'Playfair Display', 'Fraunces', Georgia, serif with font-variation-settings: 'opsz' 72 if using a variable font. The left panel gets a muted tint (#f5f1ea); the right stays white. Because absolute positioning removes the headline from flow, add min-height on the wrapper or reserve space with an invisible spacer sized to the headline — otherwise the grid row collapses to panel content and the headline overlaps other elements. On narrow viewports below 640px, reset the image's right: 0 so it doesn't escape the card entirely. Vogue, Kinfolk, Cereal, The New York Times Magazine, and Substack Reads all use variations of this pattern; editorial content sits in the $5-12 CPM range but drives higher session depth (2-3× baseline) which compounds via display-refresh revenue.

The wrapper is grid-template-columns: 55% 45% — text gets the larger column, sticky image the smaller. The left panel is a normal-flow stack of paragraphs (each ~3-6 paragraphs per chapter). The right panel is a grid cell with a single inner <div> using position: sticky; top: 0; height: 100vh. Because sticky is scoped to its nearest scroll ancestor, the image pins as the page scrolls until the right column's bottom edge passes the viewport top. The image itself uses object-fit: cover on an <img> so it never letterboxes. To swap images mid-story (the Pudding pattern), give each chapter its own image with staggered top offsets so each chapter's image pins for its own section — the effect reads as camera cuts synced to reading progress. Sticky silently fails when any ancestor has overflow: hidden, overflow: auto, or overflow: clip, so audit the ancestor chain before assuming the sticky rule itself is broken. The sticky child needs an explicit top value (top: 0 is standard) or it behaves like position: relative and never pins. On mobile, drop the sticky behavior entirely (or use a shorter height: 60vh) so the pin doesn't eat the whole small viewport. Long-form journalism using this pattern (NYT Snow Fall, Pudding data essays, Guardian long-reads) averages 8-12 minute session length — 4-6× baseline article dwell time.

The stage is a wrapper with perspective: 1200px and transform-style: preserve-3d. Inside, two panels sit in a flex row: the left carries transform: rotateY(-6deg) and the right rotateY(6deg), plus transform-origin set to the inner edge so the tilt hinges toward the viewer. A CSS custom property --tilt drives both rotations (with opposite signs), and a small IntersectionObserver script toggles --tilt: 0deg when the card enters the viewport, easing the panels flat via transition: transform 700ms ease-out. On hover the tilt returns for a subtle re-engage. Critical detail: transform-style: preserve-3d must live on the parent, not the panels — setting it on the panels themselves leaves them flat because their own children would need the 3D context. Text inside tilted panels can look blurred on Windows Chromium due to subpixel rendering under 3D transforms; add will-change: transform during the animation and remove it after (the compositor promotes the layer for the duration only). Modern browsers can drop the JS entirely by using scroll-timeline with animation-timeline — Chrome 115+ and Edge 115+ support it natively; Safari and Firefox use the IntersectionObserver fallback. Under prefers-reduced-motion: reduce, skip the observer entirely and render both panels at --tilt: 0deg from first paint.

Yes — every layout in this collection is framework-agnostic. The demos use CSS Grid, Flexbox, custom properties, :has(), clip-path, and (for a few) a small vanilla-JS handler for range-input sync or IntersectionObserver-driven tilt. None depend on a JavaScript framework's runtime, and none carry component library assumptions. To port into a React or Next.js App Router project, paste the HTML into a <section> component and drop the scoped CSS into a CSS module, styled-components, or a Tailwind @layer components block. The class prefixes (.ss-edt-, .ss-dia-, etc.) prevent global collisions when multiple split-screen sections appear on the same page. Tailwind v4 users can convert most rules 1:1 — grid-template-columns: 55% 45% becomes grid-cols-[55%_45%], clip-path: polygon(...) becomes an arbitrary variant. shadcn/ui doesn't ship a split-screen primitive (its Card and Sheet components serve different jobs), so these fill the ecosystem gap. Aceternity ($299/yr Pro) ships one split-screen hero at ~45KB with animation library dependencies; Magic UI and ReactBits similarly bundle motion libraries. The demos here ship at zero bundle cost — pure HTML + CSS + optional 20-line vanilla JS. Vue's <script setup>, Svelte's <script>, and Astro's <script is:client> all execute the same handler code without modification.