Solution

You'll build the page layout that was famously fiddly for a decade — and watch CSS Grid's named areas collapse it into a handful of declarative lines.

The problem, in plain English

Almost every content site has the same skeleton: a banner across the top, a footer across the bottom, and a three-column band in the middle — a nav rail, the main content, and a secondary sidebar. The hard parts historically were making the centre column fluid while the rails stayed fixed, keeping all three columns the same height, and not having to put the sidebars before the content in the HTML. Grid solves all three at once: you name the regions and place them on a template.

The mental model

Picture a 3×3 grid. The top row is one wide cell (the header), the bottom row is one wide cell (the footer), and the middle row splits into three cells (nav, main, aside). With grid-template-areas you literally draw that map as strings, then tell each region which named area it belongs to. The columns are sized 150px 1fr 150px — fixed rails, fluid centre — and because grid cells in a row stretch to the tallest, the columns are equal height automatically.

A first attempt

Before Grid, the go-to was floating the three middle columns:

<div className="middle">
  <nav style={{ float: 'left', width: 150 }}>…</nav>
  <aside style={{ float: 'right', width: 150 }}>…</aside>
  <div className="main">…</div> {/* fills the middle */}
</div>

This works only with care and quickly bites back. Floated columns don't share a height, so the sidebars stop short of the content (or vice-versa) and their backgrounds don't reach the footer. You need a clearfix so the footer doesn't ride up into the floats, and to avoid the centre slipping under a sidebar you often have to reorder the HTML — sidebars before the content — which hurts reading order and accessibility. Floats were never meant for page layout.

The working solution

import './styles.css';

export default function App() {
  return (
    <main className="container">
      <h1>Holy Grail</h1>

      {/* One grid; each child is placed onto a named area. */}
      <div className="holy-grail">
        <header className="hg-header">Header</header>

        <nav className="hg-nav">
          <h2>Nav</h2>
          <ul><li>Home</li><li>About</li><li>Contact</li></ul>
        </nav>

        <div className="hg-main">
          Main content. This column flexes to fill the space between the two
          fixed sidebars, and all three share the same height.
        </div>

        <aside className="hg-aside">
          <h2>Aside</h2>
          <ul><li>Links</li><li>Ads</li><li>Widgets</li></ul>
        </aside>

        <footer className="hg-footer">Footer</footer>
      </div>
    </main>
  );
}

.holy-grail {
  display: grid;
  grid-template-areas:
    'header header header'
    'nav    main   aside'
    'footer footer footer';
  grid-template-columns: 150px 1fr 150px; /* fixed | fluid | fixed */
  grid-template-rows: auto minmax(220px, 1fr) auto;
  gap: 12px;
}
.hg-header { grid-area: header; }
.hg-nav    { grid-area: nav; }
.hg-main   { grid-area: main; }
.hg-aside  { grid-area: aside; }
.hg-footer { grid-area: footer; }

The shift from floats: instead of nudging boxes left and right and cleaning up afterwards, you declare the whole map once. grid-template-areas names the five regions; grid-template-columns: 150px 1fr 150px makes the rails fixed and the centre fluid; equal heights and the spanning header/footer fall out of the grid model for free. The HTML can stay in natural reading order — header, nav, main, aside, footer — regardless of where each lands visually.

Walking through one call

There's no runtime logic — the browser resolves the layout from the grid declarations. Say the container is 900px wide with gap: 12px:

1. Columns resolve. Two fixed 150px rails take 300px; two gaps take 24px; the 1fr main column absorbs the remaining 900 − 300 − 24 = 576px.
2. Rows resolve. The header row is auto (as tall as its content), the footer row is auto, and the middle row is minmax(220px, 1fr) — at least 220px, growing if there's space.
3. Regions place onto areas. Each child's grid-area matches a name in the template, so <header> fills the full top row, nav/main/aside fill the middle three cells, and <footer> fills the full bottom row — no matter their order in the HTML.
4. Heights equalise. All three middle cells belong to the same grid row, so they stretch to the same height automatically; the sidebars reach all the way down to the footer.

Widen or narrow the container and only the centre column changes width — the rails stay put and the columns stay aligned.

Gotchas

• Floats for page layout. They don't equalise heights, need clearfixes, and often force sidebars-before-content source order. Fix: use Grid (or Flexbox) designed for layout.
• Sizing the centre column by hand. Hardcoding the main width breaks the moment the container resizes. Fix: give it 1fr so it absorbs whatever's left.
• Mismatched area names. A typo between grid-template-areas and a grid-area silently drops the region into an implicit track. Fix: keep the names identical.
• Uneven grid-template-areas rows. Every row string must list the same number of columns, or the template is invalid and ignored. Fix: keep all rows the same column count.

Going further

• Sticky header/footer. Make the header stick to the top on scroll, or pin the footer to the viewport bottom on short pages.
• Responsive collapse. At narrow widths, redefine grid-template-areas in a media query to stack all five regions into one column.
• Named grid lines. For more complex pages, place items with line numbers/names instead of areas to span arbitrary cells.

Alternative solutions

import './styles.css';

export default function App() {
  return (
    <main className="container">
      <h1>Holy Grail</h1>
      <div className="holy-grail">
        <header className="hg-header">Header</header>
        <div className="hg-middle">
          <nav className="hg-nav"><h2>Nav</h2><ul><li>Home</li><li>About</li><li>Contact</li></ul></nav>
          <div className="hg-main">
            Main content. This column flexes to fill the space between the two
            fixed sidebars, and all three share the same height.
          </div>
          <aside className="hg-aside"><h2>Aside</h2><ul><li>Links</li><li>Ads</li><li>Widgets</li></ul></aside>
        </div>
        <footer className="hg-footer">Footer</footer>
      </div>
    </main>
  );
}

.holy-grail { display: flex; flex-direction: column; gap: 12px; }
.hg-middle { display: flex; align-items: stretch; gap: 12px; min-height: 220px; width: 100%; min-width: 0; }
.hg-nav, .hg-aside { flex: 0 0 150px; }
.hg-main { flex: 1; min-width: 0; }