Source

Pancake

The Pancake layout creates a three-layer layout pattern where the middle layer fills available space, commonly used for header/content/footer structures. This component uses CSS Grid to create a full-height layout with auto-sized header and footer sections while the content area expands to fill the remaining vertical space.

Example

<div class="pancake" style="min-height: 100vh; --layout-gap: 1rem">
  <header>Header content</header>
  <main>Main content that fills available space</main>
  <footer>Footer content</footer>
</div>

Custom Properties

Property	Default	Description
`--layout-gap`	`0`	Gap between the three layers

← layout: Grid layout: Pile →