Holy Grail — UI Challenge | FineFrontend

Practice workspaceSign in

React/Holy Graileasy

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

User interface challenge

Holy Grail

easy15 min

Build the classic Holy Grail layout: a full-width header, three side-by-side columns, and a full-width footer. The center column grows to use the available space, while the footer stays at the bottom when the content is short. The markup and visual styling are supplied; implement the layout in the separate CSS file using Flexbox, Grid, or both.

Requirements

Preserve the supplied semantic header, navigation, main content, aside, and footer, including their data-testid attributes.
Keep the three columns side by side in this order: Navigation, Main content, Sidebar. Align their top and bottom edges and do not overlap them.
Let the main content use the remaining space. Keep the left and right columns equally sized, at least 72px wide; allow the content column to shrink.
Make the header and footer span the full layout width, above and below the three columns.
Make the layout at least as tall as the viewport. With the supplied short content, the footer should sit at the bottom, without using fixed or absolute positioning.
Keep the layout usable at widths of 320px and above without horizontal page overflow. The three-column arrangement remains in place; no mobile stacking is required.
Keep CSS in its supplied separate file. No JavaScript interactions, state, event handlers, external UI libraries, or API requests are needed.

Examples

Example 1

Input: Open the supplied page
Output: Header across the top, Navigation | Main content | Sidebar in the middle, Footer across the bottom.

Example 2

Input: Resize the preview
Output: The content column adapts, the regions stay aligned, and the footer stays below the columns.

A static layout exercise. The supplied five regions are laid out with CSS; automated browser checks measure their rendered positions instead of requiring a particular CSS technique.

What the tests check

Render all five visible semantic regions.
Measure side-by-side column order and alignment.
Check full-width header/footer placement and the footer bottom edge.
Preserve a keyboard-focusable link to main content.

References

Common layouts using CSS Grid CSS flexible box layout

CSSLayoutGridFlexboxSemantic HTMLColumn layoutViewport sizing

Back

Preparing your workspace…