Layout Grid
A visual guide to the FumaDocs 5-column grid architecture.
The starlight-fumadocs theme is built on a high-performance 5-column CSS Grid. This architecture ensures that the sidebars have edge-to-edge backgrounds while the content remains perfectly centered and readable.
Grid Map Visualization
Section titled “Grid Map Visualization”The diagram below visualizes the active grid areas on this page. Note how the Main Content is flanked by flexible padding tracks and dedicated navigation rails.
How it Works
Section titled “How it Works”The grid spans the full viewport width (100vw). By using 1fr for the padding tracks (LP and RP), the content area naturally centers itself while the sidebars remain fixed in width.
- Responsive Scaling: As you resize the window, the
1frtracks shrink first. - Edge-to-Edge: The
SidebarandTOCregions use their grid columns to anchor background colors that extend to the browser edges. - TOC Sync: The right-hand rail is where the Worm Glide indicator lives, perfectly aligned with the
right-sidebartrack.
Interactive Preview
Section titled “Interactive Preview”Toggle between different screen sizes using the device switcher in the preview bar below to see how the grid architecture adapts in real-time.