HTML/CSS - 22

HTML/CSS - 22: Advanced Layout Patterns

Now that you know both Flexbox and Grid, you can start combining them to build larger page layouts.

One useful pattern is a page with a header, sidebars, a main content area, and a footer. CSS Grid works well for the overall page structure, while Flexbox can help arrange smaller pieces inside each section.

You may sometimes hear this kind of page structure called a Holy Grail layout. The unusual name simply refers to a classic webpage layout with a main content area between side columns.

Your challenge: Build a responsive page with a header, left sidebar, main content area, right sidebar, and footer.

What should you notice?

The page begins with a one-column layout. This keeps the content easy to read on smaller screens.

Each section is connected to a named grid area using rules such as: grid-area: main;

The parent container then decides where those named areas should appear with grid-template-areas.

For example, the mobile layout can be written as: "header" "left" "main" "right" "footer". This places each section on its own row.

Build the wider layout:

Inside a media query, try: grid-template-columns: 180px 1fr 160px;

The first column becomes the left sidebar, the middle column takes the remaining space, and the final column becomes the right sidebar.

You can then use: "header header header", "left main right", and "footer footer footer" to describe the rows.

Why use 1fr for the middle? The main content should normally receive more room than the sidebars. Using 1fr allows that middle column to expand into the available space.

Experiment: Change the left sidebar from 180px to 250px. Notice how the main content becomes narrower.

Then change it back and try making the right sidebar wider instead.

Try a sticky sidebar:

Inside one sidebar, you can experiment with: position: sticky; and top: 20px;.

Sticky positioning can keep an element near the top of the screen while the surrounding page scrolls, although it only becomes noticeable when the page is tall enough to scroll.

Grid outside, Flexbox inside:

You do not need to choose between Grid and Flexbox for an entire website. A common approach is to use Grid for the large page structure and Flexbox for smaller groups inside it.

For example, the header could use: display: flex; to arrange a site title and navigation beside each other.

Good layout habit: Start with the simplest layout that works on small screens, then add complexity only when more space becomes available.

<style>

  .page-layout {
    display: grid;
    gap: 15px;

    grid-template-areas:
      "header"
      "left"
      "main"
      "right"
      "footer";
  }

  .site-header {
    grid-area: header;
  }

  .left-sidebar {
    grid-area: left;
  }

  .main-content {
    grid-area: main;
  }

  .right-sidebar {
    grid-area: right;
  }

  .site-footer {
    grid-area: footer;
  }

  @media (min-width: 800px) {

    .page-layout {
      grid-template-columns: 180px 1fr 160px;

      grid-template-areas:
        "header header header"
        "left main right"
        "footer footer footer";
    }

  }

</style>

<div class="page-layout">

  <header class="site-header">
    <h1>Explorer Journal</h1>
  </header>

  <aside class="left-sidebar">
    <h2>Sections</h2>
    <p>Notes</p>
    <p>Maps</p>
    <p>Ideas</p>
  </aside>

  <main class="main-content">
    <h2>Main Story</h2>
    <p>
      This main area expands to use the available space.
    </p>
  </main>

  <aside class="right-sidebar">
    <h2>Quick Info</h2>
    <p>Useful secondary information goes here.</p>
  </aside>

  <footer class="site-footer">
    <p>End of the Explorer Journal.</p>
  </footer>

</div>