Container Query min-width: 600px — Reveal a Sidebar

min-width: 600px — The "Sidebar Appears" Threshold

A 600px container has enough room for a primary content column (~400px) plus a thin secondary column (~180px) with a divider. Below 600px, that secondary content needs to either disappear, collapse to icons, or move to the bottom of the article.

The Markup

<section class="article-host">
  <div class="article">
    <main class="article-main">…long-form content…</main>
    <aside class="article-side">…TOC, metadata…</aside>
  </div>
</section>

The CSS

.article-host {
  container-type: inline-size;
  container-name: article;
}

.article {
  display: block; /* aside falls below main */
}

.article-side {
  display: none; /* hide on narrow */
}

@container article (min-width: 600px) {
  .article {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 2rem;
  }
  .article-side {
    display: block;
  }
}

Why Hide Instead of Stack?

For dense secondary panels (metadata, TOCs, filters), stacking them above or below the main content rarely helps the user — they end up scrolled past on phones and ignored. Hiding them at narrow widths keeps the interface clean, and revealing them as soon as the host crosses 600px makes the most of available space.

Combine with prefers-reduced-data

For users on slow connections you can suppress heavy sidebar widgets even when the host is wide enough:

@container article (min-width: 600px) and (prefers-reduced-data: no-preference) {
  .article-side {
    display: block;
  }
}

A Word on container-name

Using container-name: article makes intent obvious to anyone reading the CSS. It also future-proofs the rule against accidental matches when you later nest another container inside the article.