One layout, five regions.
A header and footer frame the page. Navigation, main content, and supporting notes share the space between them.
Explore the layout
Resize the nested page and scroll its content. The header and footer stay visible while the columns adapt to the preview width.
Nested header <header>
Header, main, footer inside the article.
Main content
The middle track expands and remains readable at every width.
Owned by the page
The root keeps the document skeleton. This route owns the visible structure, so the holy grail pattern stays local to the page instead of leaking into the app shell.
Rows and columns
The page shell is a grid with header, main, and footer rows.
The middle track uses grid columns so the sidebars never steal the spotlight.
Room on every screen
The layout still works when the rails collapse on mobile.
The nested shell lets the middle track adapt to the article width instead of the viewport.