Structure & gridsPattern 02 / 12

Split Screen Layout

Pairs two equally weighted panels to compare choices or connect a primary task with a complementary message or visual.

  • Portfolios
  • product comparisons
  • auth pages

What you’ll learn

  • How to recognize the structure
  • When it helps—and its trade-offs
  • How it adapts to smaller screens
  • A practical starting point
In this guide

Start with the shape

Read the figure

The numbered parts explain the decisions behind the composition. Read the relationships first; the colors are simply there to make the structure visible.

Layout anatomyPattern 02
Split Screen Layout: structure diagramTwo equally weighted panels, with a clear relationship. 1: First panel. A message, first choice, or primary task occupies one half. 2: Second panel. A contrasting choice or complementary visual occupies the other half. 3: Shared frame. Navigation and alignment make the two halves feel like one experience.010203

Two equally weighted panels, with a clear relationship.

  1. 01
    First panel

    A message, first choice, or primary task occupies one half.

  2. 02
    Second panel

    A contrasting choice or complementary visual occupies the other half.

  3. 03
    Shared frame

    Navigation and alignment make the two halves feel like one experience.

How the pattern works

A split screen treats two regions as peers. They might contrast two choices, pair a message with a strong image, or put a sign-in form beside brand context. Equal space creates a visible relationship between the panels.

Equal width does not mean equal importance in every interaction. A form still needs a clear heading and action, and two choices need understandable labels. Use the split to explain the relationship, not just to fill half the screen with decoration.

Where it fits—and what to consider

A useful choice when

  • Two ideas benefit from being compared side by side.
  • A task has a strong complementary image or message.
  • Each panel has enough substance to justify equal space.

Be deliberate about

  • Two unrelated calls to action can make the next step unclear.
  • A decorative panel should not push an essential task below the fold on mobile.

Adapt the relationship, not just the size

A useful mobile layout preserves the task and content order while changing how the regions share space.

Split Screen Layout: narrow-screen adaptationStack the panels in task order. For sign-in, keep the form easy to reach; shorten or remove purely decorative supporting content.
Small-screen structure

On wider screens

Use equal tracks with consistent edges. Let content determine height instead of forcing every screen to be exactly one viewport tall.

On narrower screens

Stack the panels in task order. For sign-in, keep the form easy to reach; shorten or remove purely decorative supporting content.

Build the structure

  1. 01Define the relationship between the two halves.
  2. 02Give each panel a clear internal hierarchy.
  3. 03Stack the panels when the content no longer fits comfortably.
A structural starting pointcss
.split {
  display: grid;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.split > * { min-width: 0; padding: 2rem; }

Adapt the content, spacing, and breakpoints to your page. This example illustrates the structure, not a complete application.

A small design exercise

Try it yourself

Draw a sign-in screen with equal panels. Now sketch its mobile version with the form first. Decide which brand content still earns space.

See a worked example

Inspect a complete page using this pattern, then connect its content regions back to the annotated figure.

Open the example page
A worked example of split screen layoutOpen full page (opens in a new tab)

Put the pattern into practice

Use the layout prompt as a starting brief, then adapt it to your real content and the decisions covered in this guide.

Read the AI layout prompt

Select the text below and copy it into your AI tool. Replace example content with your own.