← Back to Dashboard

Holy Grail Layout - Flexbox

The Holy Grail layout is a classic web design pattern with a header, footer, and three columns. This version uses Flexbox for flexible and responsive layout.

Header

Main Content Area

This is the main content section. It expands to fill the available space between the sidebars.

Footer

Key Flexbox Properties Used:

  • display: flex - Creates a flex container
  • flex-grow: 1 - Main content expands to fill space
  • flex-direction: column - Stack elements vertically on mobile