Problem Statement
The "Holy Grail Layout" is a classic web page layout consisting of:
- A full-width header at the top.
- Three columns below the header: a left sidebar, a main content area in the center, and a right sidebar.
- A full-width footer at the bottom.
An interview twist often tests:
- Responsive adaptiveness: On mobile viewports, the sidebars should collapse and pile vertically underneath or above the main content.
- Accessibility & SEO source order: For SEO and assistive readers, the main content block must appear first in the HTML code tree, before the sidebars. Visually, however, the main content must sit in the middle.
We need to implement this responsive layout using modern CSS Grid and Flexbox techniques.
Requirements
Functional
- Semantic Layout: Render header, sidebars, main, and footer sections.
- HTML Source Order: The
<main>content container must be defined ahead of<aside>sidebar elements inside the HTML code structure. - Responsive Visual Positions:
- Desktop (e.g. screen width ≥ 768px): Render the three columns side-by-side with the main content in the center.
- Mobile (e.g. screen width < 768px): Collapse all side-by-side columns into a single column flowing vertically.
- Sticky Footer: If the page has very little content, the footer must stay stuck to the bottom of the viewport.
Non-Functional
- Implement using two engines: CSS Grid and CSS Flexbox (using the
orderproperty). - Avoid absolute dimensions where possible to maintain responsive flexibility.
Concepts Tested
- CSS Grid track placements (
grid-column,grid-row). - Flexbox ordering (
orderproperty). - Roving layouts via Media Queries.
- Min-height container structures for sticky footers.