Split Layout

• Docs
• API

Split vertically

Left

Right

HTML

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

CSS

  vscode-split-layout {
    height: 200px;
    width: 500px;
  }

  [slot="start"],
  [slot="end"] {
    align-items: center;
    display: flex;
    justify-content: center;
    overflow: hidden;
  }

Split horizontally

Top

Bottom

HTML

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

CSS

vscode-split-layout {
  height: 500px;
  width: 250px;
}

[slot="start"],
[slot="end"] {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

Nested layouts

Left

Right Top

Right Bottom

HTML

<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>

CSS

vscode-split-layout {
  height: 500px;
  width: 500px;
}

vscode-split-layout > vscode-split-layout {
  height: 100%;
  width: 100%;
}

[slot="start"],
[slot="end"] {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

Fixed pane

Left

Right

Resize it

HTML

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

CSS

vscode-split-layout {
  height: 250px;
  width: 100%;
}

vscode-split-layout [slot="start"],
vscode-split-layout [slot="end"] {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
}