Split Screen Video Layout
Build split-screen layouts for duets and comparisons: set your panes, arrangement, and aspect ratio for exact coordinates and copy-ready CSS.
Split-Screen Layout Generator
Fill in the inputs below, hit Generate, and your results appear instantly — copy any item in one click.
Something went wrong running this tool. Your inputs were kept.
What is Split screen video layout?
Split-Screen Layout Generator — Build split-screen layouts for duets and comparisons: set your panes, arrangement, and aspect ratio for exact coordinates and copy-ready CSS.
Pure rectangle math: the fixed canvas preset is subdivided into columns (side-by-side), rows (stacked), a fixed 2/3/4-pane grid rule, or a full-bleed main pane with stacked PiP overlays. Pixel remainders go to the last pane so the canvas tiles exactly. Nothing is rendered here — the preview is drawn by the UI from the SVG parameters.
Why use this split screen video layout?
Built for split screen video layout
Build split-screen layouts for duets and comparisons: set your panes, arrangement, and aspect ratio for exact coordinates and copy-ready CSS.
Transparent & honest
Pure geometry — the tool computes coordinates; rendering/preview is the UI's job.
Private by design
Everything runs in your browser. Your inputs never leave your device.
Works everywhere
Fully responsive — perfect on desktop, tablet, and mobile. No app needed.
Regularly updated
Regularly maintained and reviewed to ensure accuracy.
Free forever
No accounts, no limits, no watermarks. Use Split-Screen Layout Generator as much as you need.
How to use Split-Screen Layout Generator
- 1Choose the Number of panes (2–4) for your split screen.
- 2Pick an Arrangement: side-by-side, stacked, grid, or pip (picture-in-picture).
- 3Select the Canvas aspect ratio: 16:9, 9:16, 1:1, or 4:3.
- 4Set the Gap between panes in pixels (0 or more; default 0).
- 5Read each pane's exact x, y, width, and height in the Pane rectangles list.
- 6Copy the CSS grid snippet into your editor, and check Warnings for panes that come out tiny.
What can you do with Split-Screen Layout Generator?
- Duet layout planner — Build split-screen layouts for duets and comparisons: set your panes, arrangement, and aspect ratio for exact coordinates and copy-ready CSS.
- Comparison video layout maker — Build split-screen layouts for duets and comparisons: set your panes, arrangement, and aspect ratio for exact coordinates and copy-ready CSS.
- Split screen template generator — Build split-screen layouts for duets and comparisons: set your panes, arrangement, and aspect ratio for exact coordinates and copy-ready CSS.
Good to know
- Pure geometry — the tool computes coordinates; rendering/preview is the UI's job.
- Canvas sizes are fixed presets per aspect ratio (16:9 → 1920×1080, 9:16 → 1080×1920, 1:1 → 1080×1080, 4:3 → 1600×1200).
- PiP overlays render above the main pane (higher z-order) — keep important content clear of that corner.
How it works
Pure rectangle math: the fixed canvas preset is subdivided into columns (side-by-side), rows (stacked), a fixed 2/3/4-pane grid rule, or a full-bleed main pane with stacked PiP overlays. Pixel remainders go to the last pane so the canvas tiles exactly. Nothing is rendered here — the preview is drawn by the UI from the SVG parameters.
Examples
Two 956×1080 columns — copy the CSS grid snippet straight into your editor.
Top row of 2 panes plus a full-width bottom pane; warns if panes get tiny.
Full-canvas main video with a 28%-width overlay — keep faces clear of the corner.
Related searches
People also search for these — this tool handles them all:
Frequently asked questions
Related tools
Explore more free tools in CapCut & Video Editing: