Skip to content

Split Layout

Split vertically

Left
Right
<vscode-split-layout>
<div slot="start">Left</div>
<div slot="end">Right</div>
</vscode-split-layout>

Split horizontally

Top
Bottom
<vscode-split-layout split="horizontal">
<div slot="start">Top</div>
<div slot="end">Bottom</div>
</vscode-split-layout>

Nested layouts

Left
Right Top
Right Bottom
<vscode-split-layout>
<div slot="start">
Left
</div>
<vscode-split-layout split="horizontal" slot="end">
<div slot="start">
Right Top
</div>
<div slot="end">
Right Bottom
</div>
</vscode-split-layout>
</vscode-split-layout>

Fixed pane

Left
Right
Resize it
<vscode-split-layout fixed-pane="start">
<div slot="start">Left</div>
<div slot="end">Right</div>
</vscode-split-layout>