The Holy Grail Layout is a web page layout that consists of four sections - a header, footer, and a main content area with two sidebars, one on each side. The layout also adheres to the following rules

  • Has a fluid center column width fixed-width sidebars
  • The center column should appear first in the markup, before the two sidebars (but after the header)
  • All three columns should be the same height, regardless of the content within them
  • The footer should always be at the bottom of the browser viewport, even when the content doesn't fill up the height of the viewport (sticky footer)
  • The layout should be responsive, all the sections should collapse into one column on smaller viewports