How can I make a two-column layout collapse to one column at a breakpoint?

Set up a one-column grid first, then change its track definition inside a width-based media query. This makes the narrow layout the starting point, and the wider layout an explicit change. For example:

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 42rem) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

Here, 42rem is a demonstration value, not a recommended threshold for every site. Below that width, the grid has one track; at and above it, the media query changes the grid to two tracks. A media query can conditionally apply a different grid track definition at a viewport-width breakpoint. [S1]

Apply the class to a parent containing the two items, for example <div class="layout">…</div>. The example only changes the column arrangement; your content and other styling remain your responsibility.

Treat that number as a starting point to test, not a device target. Look at the actual content in both columns and narrow the available viewport gradually. Find the width where the side-by-side arrangement begins to fail—for example, headings wrap in distracting ways, paragraphs become uncomfortably narrow, or a card’s contents feel squeezed. Set the breakpoint around that point so the layout becomes one column before the cramped version is a problem.

MDN recommends choosing breakpoints based on when the content or layout starts to fail, rather than targeting particular device sizes. [S1] There is no universal width specified here, so decide the right value by inspecting your own layout.

Suppose the blocks are an introduction and a sign-up panel. Those are placeholder contents; use your actual text and components when testing. First, keep the one-column default. Then temporarily set a breakpoint and inspect the page just below and just above it. If the sign-up panel is too narrow beside the introduction, move the breakpoint upward so stacking starts sooner. If both blocks still have comfortable room at a narrower width, try moving it downward and inspect again.

For a copyable test structure:

<div class="layout">
  <section>Introduction content</section>
  <aside>Sign-up panel content</aside>
</div>

Pair it with the CSS example, replace the placeholder text with representative content, and tune 42rem. Check the transition area, not only one narrow and one wide view: you want to notice where the two-column arrangement stops working. This is a practical visual check, not a guarantee that the layout will suit every browser, content variation, or viewport.

Confirm that the default rule really is one column and that the media query changes the same grid container to two columns. Test with the longest realistic heading and the fullest expected panel, since short sample text can hide crowding. Also check that the gap still looks appropriate in both arrangements. If the content changes later, revisit the breakpoint: it reflects when that content stops fitting comfortably, not a permanent rule tied to a device label.