Responsive Fixed-Width Sidebar with CSS Grid

A fixed-width sidebar can sit beside fluid page content on a wide screen and move below it on a narrow screen. CSS Grid handles both layouts without floats, negative margins, or hiding the sidebar on phones.

The original example used floats to reserve a 320-pixel sidebar and hid it below a 768-pixel breakpoint. The updated pattern keeps supplementary content available at every width and makes the breakpoint a layout choice you can adjust to your content.

Mark up the main content and sidebar

Keep the main content first in the document so it remains first when the columns stack. Use an <aside> for content that is related to, but separate from, the main content. See MDN's guidance on the <aside> element. If your page template already has a <main>, do not add a second one.

<div class="page-layout">
  <main class="page-layout__main">
    <h1>Page content</h1>
    <p>Your primary content goes here.</p>
  </main>

  <aside class="page-layout__sidebar" aria-labelledby="sidebar-heading">
    <h2 id="sidebar-heading">Related information</h2>
    <p>Add supplementary links or other useful content here.</p>
  </aside>
</div>

Set a fixed sidebar width with CSS Grid

Grid keeps the main column flexible and the sidebar at a predictable width. minmax(0, 1fr) and min-inline-size: 0 let the main column shrink instead of allowing its contents to widen the whole page.

*,
*::before,
*::after {
  box-sizing: border-box;
}

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.5rem;
  width: calc(100% - 2rem);
  max-width: 72.5rem;
  margin-inline: auto;
}

.page-layout__main,
.page-layout__sidebar {
  min-inline-size: 0;
}

@media (max-width: 52rem) {
  .page-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

The 20rem track is fixed while the layout has two columns; adjust it to suit your sidebar. At 52rem and below, the sidebar moves after the main content in the document order. That value is a starting point, not a universal tablet breakpoint: resize your actual page and change it where the columns become cramped. MDN's CSS Grid guide explains the grid tracks used here.

Keep the layout usable on small screens

Do not hide important sidebar content just to make a narrow layout fit. If a sidebar contains only optional promotion or decoration, decide separately whether it belongs on small screens; CSS layout alone should not remove information a reader needs. Use the same approach when placing an ad: make sure the page's primary content still fits and remains in a logical reading order.

Check the page with its real text and images at a narrow viewport, including the equivalent of 320 CSS pixels, and with text enlarged. Look for page-level horizontal scrolling, clipped content, and a sidebar that appears before the main content. The WCAG Reflow guidance explains when content should reflow and the limited cases where two-dimensional scrolling is appropriate.

For more responsive layout approaches, see our guide to practical responsive web design patterns. MDN also documents CSS media queries for adapting layouts to viewport or device features.