# Panes
> Material 3 canonical layouts, from the HTML.
## Anatomy
A `.panes` (or `.pane-layout`, or `.list-detail`) is the container. Two or three `.pane` children are the surfaces. There is no JavaScript — the HTML is the layout.
Tokens follow the [M3 canonical layouts](https://m3.material.io/foundations/layout/canonical-layouts). Coplanar is the default: full-bleed surfaces and a 1dp `outline-variant` divider. The split is 840px, from either the viewport or the panes container itself (`container-type: inline-size`). Below that, one pane at a time. Compact windows add 16dp inline margins; every wider layout uses 24dp margins and 24dp spacers. Give the container a height — it is `height: 100%`.
Semantic child names are aliases of `.pane`: `.list-pane`, `.detail-pane`, `.primary-pane`, `.supporting-pane`. Mark the visible pane on compact windows with `active`. Optional content that should overlay the page is a [side sheet](/side-sheet.html.md), not a pane.
## List-detail
The default. A 360dp list pane beside a flexible detail pane. People pick a row; the detail shows that item. Use `.list-detail` or a plain `.panes`. Pair the list pane with a [list](/lists.html.md).
## Inbox
- Brunch this weekend?
Ali Connors — I will be in your neighborhood doing errands.
- Summer BBQ
Tori Text — Wish I could come, but I am out of town.
- Birthday gift
Sandra Adams — Have any ideas about what we should get Heidi?
- Recipe to try
Craig Gaskell — We should eat this: grated squash and corn.
## Brunch this weekend?
I will be in your neighborhood doing errands this weekend. Want to grab brunch on Saturday?
Reply Forward
```
Inbox
…
Subject
…
```
## Compact
On Compact windows (below 600px), the layout has 16dp inline margins. Medium, Expanded, Large, and Extra-large windows use 24dp inline margins and 24dp spacers. On Compact and Medium windows (below 840px), every pane is hidden except `active`. If none is active, the first pane shows. Toggle `active` yourself when the user picks a row or taps back — `AutoInit()` does not start panes. On Expanded windows both panes are shown regardless of `active`, so the same markup works at every size.
The illustration below is forced to one pane so the swap is visible here. Narrow the window below 840px to see the component do it itself — the list-detail demo above is the live compact view.
## Inbox
- Brunch this weekend?
Ali Connors — I will be in your neighborhood doing errands.
- Summer BBQ
Tori Text — Wish I could come, but I am out of town.
- Birthday gift
Sandra Adams — Have any ideas about what we should get Heidi?
## Brunch this weekend?
I will be in your neighborhood doing errands this weekend. Want to grab brunch on Saturday?
```
list.querySelectorAll('a').forEach((row) => {
row.addEventListener('click', (event) => {
event.preventDefault();
detailPane.classList.add('active');
listPane.classList.remove('active');
});
});
back.addEventListener('click', () => {
detailPane.classList.remove('active');
listPane.classList.add('active');
});
```
## Supporting pane
A flexible primary pane plus a 360dp supporting pane on the trailing edge. Use it when the extra content is secondary — a related list, inspector, or outline — and should stay in view beside the focus. Add `supporting`, or use `.supporting-pane-layout`.
`start` (or `left`) docks the supporting pane on the leading edge instead.
## Article
The primary pane holds the focus of the screen. Supporting content sits beside it on expanded windows and hides on compact ones until you mark it `active`.
A supporting pane is in the page flow. A [side sheet](/side-sheet.html.md) overlays the page and can be dismissed.
## Contents
- Outline
- Related
- Comments
```
……
…
```
## Equal
`equal` splits two panes 1fr / 1fr. Use it when the two surfaces have the same weight — two documents, a diff, an editor and a preview.
## Draft
Write in this pane. Both columns grow equally once the window is at least 840px wide.
## Preview
The preview stays in lockstep with the draft. Neither pane is the list; neither is supporting.
```
……
```
## Three-pane
`three-pane` is list + focus + supporting. It needs 1200px: 360dp list, a flexible middle, 360dp supporting. Between 840px and 1200px the default two-column list-detail grid still applies, so the third pane wraps. Below 840px it is the same single-pane `active` pattern as the others.
## Mail
- Brunch this weekend?
- Summer BBQ
- Birthday gift
## Brunch this weekend?
I will be in your neighborhood doing errands this weekend. Want to grab brunch on Saturday?
## Details
- Ali Connors
From
- Sat, 10:00
When
```
………
```
## Appearance
Coplanar is the default: the panes share one surface, with a 1dp divider on expanded windows. `separated` (or `floating`) insets the panes 24dp, rounds them to 16dp, and fills each with `surface-container-low`.
On a separated pane, `elevated` adds elevation 1. `outlined` switches the fill to `surface` and draws a 1dp outline.
## Outlined
Surface, 1dp outline-variant stroke, no elevation.
## Elevated
Surface-container-low at elevation 1.
```
……
```
## A pane
Each pane is a column. A child `` (or `.pane-header`) is the 64dp top bar: icon-only buttons, then a `title-large` heading. A child ``, `.pane-content`, `.pane-body`, or `