Skip to main content
Container centres content at a measure, and Stack puts one gap from the spacing scale between a row or a column of children. Between them they cover page measure, section rhythm, and the ordinary rows and columns that would otherwise be bespoke CSS in every app.
Both are layout only: they paint no surface and wrap no child. Stack is why no component here carries a margin of its own, since the space between two things belongs to whatever holds both of them.

​
Page layouts

For a list beside a detail pane, or a main pane with a companion, use ListDetail and SupportingPane. They follow Material Design’s canonical layouts and stand the panes side by side from the expanded window size class.

​
Lining up an app bar

An AppBar that paints edge to edge can still line its contents up with the page beneath it. Give it the page’s measure and the page’s gutter:

​
Scrolling and collapsing

AppBar takes scrolled and collapsed, and both are controlled, because only the app knows which element scrolls. A pinned flexible bar gives its height back as the page scrolls, becoming the small bar:
The scroll container needs overflow-anchor: none. Collapsing hands the page back the height the bar gives up, and a browser answers that by moving the scroll offset the same distance so the content stays put. That is the offset collapsed was derived from, so the bar expands again and the two take turns.
With anchoring off, the content follows the bar’s bottom edge up instead of standing still behind it, which is the movement you want anyway.