CSS Responsive

RWD Templates

Now we bring everything together into a complete, responsive page template: a header, navigation, a main content grid, a sidebar and a footer. It uses CSS Grid for structure, flexible cards for the content, and a media query to collapse gracefully on mobile — a pattern you can adapt for real projects.

The Anatomy of a Page Template

Most content pages share the same skeleton: a header at the top, a navigation strip, a main area (often with a sidebar), and a footer at the bottom. Responsive design means this skeleton rearranges itself for smaller screens instead of breaking.

Header: the site title or logo band across the top.
Navigation: links, horizontal on desktop and stacked on mobile.
Main content: the primary reading area, often a card grid.
Sidebar: secondary content that moves below main on small screens.
Footer: copyright and links, always full width.

A Complete Responsive Template

The template below uses a grid with a fixed sidebar column beside a flexible main column on desktop. The inner card grid uses auto-fit so cards reflow. Below 700px a media query stacks everything into one column. Resize the result pane to watch the whole page adapt.

A full responsive page template — resize the result

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  * { box-sizing: border-box; }
  body { font-family: sans-serif; margin: 0; background: #f8fafc; color: #1e293b; }

  .header {
    background: #0f172a; color: #fff;
    padding: 20px; font-size: 20px; font-weight: 800;
  }

  .nav {
    display: flex; flex-wrap: wrap; gap: 8px;
    background: #1e293b; padding: 10px 20px;
  }
  .nav a {
    color: #fff; text-decoration: none; background: #334155;
    padding: 8px 14px; border-radius: 6px; font-weight: 600;
  }

  .layout {
    display: grid;
    grid-template-columns: 220px 1fr; /* sidebar + main */
    gap: 16px;
    padding: 16px;
  }

  .sidebar {
    background: #6366f1; color: #fff;
    padding: 18px; border-radius: 8px; font-weight: 700;
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
  }
  .card {
    background: #fff; border: 1px solid #e2e8f0;
    padding: 24px 14px; border-radius: 8px;
    text-align: center; font-weight: 700;
  }
  .card:nth-child(odd) { background: #ecfeff; }

  .footer {
    background: #0f172a; color: #cbd5e1;
    padding: 18px 20px; text-align: center; font-size: 14px;
  }

  /* Mobile: stack sidebar above main content */
  @media (max-width: 700px) {
    .layout { grid-template-columns: 1fr; }
  }
</style>
</head>
<body>
  <header class="header">My Responsive Site</header>

  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">Jobs</a>
    <a href="#">Internships</a>
    <a href="#">About</a>
  </nav>

  <div class="layout">
    <aside class="sidebar">Sidebar<br>Filters &amp; links</aside>
    <main>
      <div class="cards">
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3</div>
        <div class="card">Card 4</div>
      </div>
    </main>
  </div>

  <footer class="footer">&copy; 2026 My Responsive Site. All rights reserved.</footer>
</body>
</html>

💡

Notice the layers of responsiveness: the nav wraps with flex-wrap, the cards reflow with auto-fit, and a single media query collapses the sidebar. Combining techniques is how real templates stay robust.

How the Pieces Fit Together

Region	Technique used
Nav	Flexbox with flex-wrap so links reflow
Overall layout	Grid: 220px sidebar + 1fr main
Card area	Grid auto-fit + minmax for a self-reflowing grid
Mobile collapse	Media query switching layout to a single column
Whole page	box-sizing: border-box and the viewport meta tag

⚠️

Always include the viewport meta tag in the head, as this template does. Without it the media queries will not behave correctly on real phones.

Adapting the Template

Change the sidebar width (220px) to suit your content.
Adjust the minmax minimum (140px) to control how many cards fit per row.
Move the breakpoint (700px) to wherever your layout starts to feel cramped.
Swap the card grid for an article column if you do not need cards.
Add more media queries only where the design genuinely needs them.

Key Points

A responsive template combines Grid, Flexbox and media queries.
Grid handles the header/sidebar/main/footer structure.
auto-fit + minmax makes the inner card grid self-reflowing.
One media query collapses the layout to a single column on mobile.
Always include box-sizing: border-box and the viewport meta tag.