Detailed explanation
The holy grail layout is a classic page structure with a full-width header, a full-width footer, and three columns between them: a left navigation sidebar, a flexible main content area, and a right sidebar. In its common form, the sidebars have fixed widths while the centre takes the remaining space. Historically, floats required clearing, width calculations, and awkward equal-height techniques. CSS Grid fits this problem directly because it controls rows and columns together.
Make the page wrapper a grid container and define three columns and three rows. For example: body { margin: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; grid-template-rows: auto 1fr auto; grid-template-areas: "header header header" "nav main aside" "footer footer footer"; min-height: 100vh; }. The outer columns remain 200px wide, while the middle column receives the remaining horizontal space. The auto rows accommodate the header and footer, and the middle row can absorb unused vertical space. A viewport-based minimum height lets short pages reach the bottom while allowing longer pages to grow normally.
Assign each direct child to its named area: header { grid-area: header; }, nav { grid-area: nav; }, main { grid-area: main; }, aside { grid-area: aside; }, and footer { grid-area: footer; }. Repeated names make the header and footer span all three columns; each named area must form a rectangle. Grid items stretch within their areas by default, giving the middle sections matching heights without float-based tricks. Using minmax(0, 1fr) instead of bare 1fr prevents the centre track's automatic minimum from forcing the grid wider than intended. Oversized content may still need overflow handling or wrapping.
For smaller screens, use a media query to switch to one column and redefine the areas as header, nav, main, aside, and footer, with suitable row sizing. Keep the HTML source order logical for reading and keyboard navigation because visual placement does not change that order. Interviewers look for correct track sizing, explicit child placement, responsive behaviour, and an understanding that this footer stays at the bottom on short pages without being fixed to the viewport.
Key points to remember
- The layout combines a full-width header and footer with two sidebars and flexible central content.
- Use three Grid columns: 200px minmax(0, 1fr) 200px.
- Define named areas on the container and assign grid-area to each direct child.
- Use auto 1fr auto rows and min-height: 100vh for a bottom-reaching footer on short pages.
- Collapse to one column on narrow screens while preserving a logical DOM order.
Common mistakes candidates make
- Defining grid-template-areas but forgetting to assign the children to those areas.
- Assuming 1fr always prevents overflow, even with long unbreakable text or oversized content.
- Keeping fixed-width sidebars on mobile or using visual reordering that conflicts with keyboard navigation.
Likely follow-up questions
Why use Grid instead of Flexbox for this layout?
Grid expresses the rows, columns, and full-width spanning regions in one container. Flexbox can also build it, but usually needs an outer column container and a nested row container for the middle section.
What is the difference between 1fr and minmax(0, 1fr)?
A standalone 1fr track has an automatic minimum that can be influenced by its items' intrinsic sizes. minmax(0, 1fr) allows the track to shrink below that minimum, though overflowing content still needs appropriate wrapping or scrolling.
Is the footer fixed at the bottom of the screen?
No, it remains in normal layout flow. The minimum viewport height and flexible middle row push it down on short pages, while longer content moves it below the visible viewport.
Interview tip: Describe the five regions, show the Grid container and child assignments, then explain overflow protection and the mobile layout.