SSG grid demo

Holy grail layout

Page-owned shell

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.

Nested header

Header, main, footer inside the article.

The nested shell lets the middle track adapt to the article width instead of the viewport.

Main

The middle track expands and remains readable at every width.

Why it stays flexible.

  • The document shell stays in root.tsx.

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