Website Layout

You will compose a full-page layout using CSS Grid so the header and footer stay at the edges while the main content fills the remaining viewport height.

What it is

Website layout is the arrangement of page regions such as header, navigation, main content, sidebar, and footer. For a full page, think of the viewport as a vertical stack: header, main, footer. CSS Grid can define that stack with rows.

The body or wrapper becomes a grid container. Related terms include grid container, grid item, grid rows, the fr unit, viewport height (vh), and semantic landmarks such as header, main, and footer.

Why it matters

• Keeps the footer at the bottom even when content is short.
• Separates page structure from component layout.
• Supports responsive design with media queries.
• Uses semantic HTML landmarks for accessibility.
• Reduces fragile hacks like absolute positioning or fixed heights.

Syntax or steps

1. Mark the page with header, main, and footer.
2. Apply display: grid to the page wrapper.
3. Set grid-template-rows: auto 1fr auto.
4. Set min-height: 100vh so the wrapper can fill the viewport.
5. Add padding, gaps, and responsive columns inside main.

The smallest useful pattern is:

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Full Page Layout</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, sans-serif; }

    .page {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 100vh;
    }

    .site-header,
    .site-footer {
      padding: 1rem;
      background: #f3f4f6;
    }

    .site-main {
      padding: 1rem;
    }

    @media (min-width: 700px) {
      .site-main {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 1rem;
      }
    }
  </style>
</head>
<body class="page">
  <header class="site-header">
    <strong>My Site</strong>
  </header>

  <main class="site-main">
    <article>
      <h2>Main content</h2>
      <p>This area grows to fill the space between the header and footer.</p>
    </article>

    <aside>
      <h2>Sidebar</h2>
      <p>Secondary content.</p>
    </aside>
  </main>

  <footer class="site-footer">
    <p>Footer stays at the bottom.</p>
  </footer>
</body>
</html>

Part by part:

• body class="page" makes the whole page a grid container.
• grid-template-rows: auto 1fr auto gives header and footer natural height, while main receives remaining space.
• min-height: 100vh makes the page at least as tall as the viewport.
• The media query turns .site-main into a two-column grid on wider screens.

Common mistakes

• Using height: 100vh instead of min-height: 100vh. Fix: use min-height so long content can expand.
• Forgetting default body margin. Fix: set body { margin: 0; }.
• Applying grid to main only and expecting the footer to stick. Fix: apply the row grid to the full page wrapper.
• Putting too much layout in one grid. Fix: use the outer grid for page regions and inner grids or flexbox for components.

When to use it

Use CSS Grid for the overall page skeleton. Use Flexbox for one-dimensional groups such as navigation links or buttons.

Practice

Guided exercise: create a page with a header, main, and footer. Make the footer stay at the bottom when the main content is only one sentence.

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Challenge: add a sidebar inside main that appears beside the article on screens wider than 700 pixels and below it on smaller screens.

Expected output: the footer remains at the bottom on short pages, and the sidebar moves from below the article to the right side when the viewport is wide.

Quick check

What does 1fr mean in grid-template-rows: auto 1fr auto?

It means the middle row receives one fraction of the remaining free space after the header and footer have taken their natural heights.

Summary

A full-page layout works best when the outer structure is separated from inner component layout. CSS Grid gives you a simple vertical skeleton with auto 1fr auto, while media queries let regions adapt to different screen sizes.