SSG grid demo
Holy grail layout
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.
This column keeps the supporting information close without asking the main content to carry everything.
- Persistent navigation stays out of the main reading flow.
- Useful metadata belongs in the rail, not in the hero copy.
- The layout still works when the rails collapse on mobile.
Header on top, main in the middle, footer at the bottom.
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.
Main content
The side rail is where you place references, status, or helper content without forcing the central article to do double duty.
- Sticky sidebars create the classic holy grail silhouette.
- The center column is the only region that should stretch hard.
- Header and footer frame the content without boxing it in.
Rendering
Rows and columns
The document shell stays in root.tsx.
Room on every screen
The page shell is a grid with header, main, and footer rows.
Owned by the page
The middle track uses grid columns so the sidebars never steal the spotlight.