SGDS Layouts

Production-ready page layout patterns that define how content areas are arranged within the Application Shell. Each layout combines SGDS components and utilities to provide a structural starting point — drop in your content blocks and you have a complete page.

What is a layout?

A layout defines the spatial arrangement of content regions on a page:

• How many content columns exist (single, split, aside + main)
• Where navigation lives (top-only vs sidebar)
• How the page scrolls (document flow vs viewport-contained)

Layouts sit between the Application Shell (mandatory page chrome) and Blocks/Templates (the actual content). The shell wraps the layout; blocks fill the layout's content areas.

Prerequisites

Before implementing any layout, ensure you have: