How can I keep a responsive layout from overflowing at its narrowest width?

Start by finding what cannot shrink. Check the container’s actual usable width, then the grid’s minimum track sizes, gaps, and any fixed widths on children. Also look for long unbroken text or other content that forces an item to stay wide. Grid and flex items can have an automatic minimum size based on their min-content, so a track may seem flexible while an item inside it resists shrinking. [S3]

A useful first test is to temporarily outline the container, tracks, and children. At the narrow width, note which edge crosses the container. If a child is responsible, test whether allowing that item to shrink resolves the spill; if the tracks are responsible, calculate whether their minimums and gaps fit. Avoid immediately hiding overflow: that can conceal the cause rather than make the content fit.

Write down the minimum widths the layout requires and add the gaps. For example, assume a two-column grid with a 15rem minimum per column and a 1rem gap. Its tracks and gap need 31rem altogether, before any container padding. If the usable width is less than that, two columns at those minimums cannot fit. This is an illustrative calculation, not a recommended universal size.

Then compare that total with the container’s usable width, not merely the viewport width. Padding reduces the room available inside the container. If reducing the gap makes it fit, the gap was part of the constraint. If it still does not fit, lower the track minimum or use a different arrangement. Responsive grid examples can create tracks according to available space, but their specified minimum track size and gaps still need to fit. [S1][S2]

Here is an example using placeholder card content. Assume the two-column arrangement needs at least 15rem per column and a 1rem gap. Its content-fit threshold is therefore 31rem of usable container width. Below that, use one column rather than forcing two undersized tracks:

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(15rem, 1fr));
  gap: 1rem;
}

@media (max-width: 32rem) {
  .cards {
    grid-template-columns: 1fr;
  }
}

The 32rem media-query value is only a starting example: it allows some room for container padding, but your content and container determine the actual threshold. A viewport-based media query may not match a component inside a narrower container, so check the usable width where the component appears. Another option is automatic track creation, such as repeat(auto-fit, minmax(230px, 1fr)); the chosen minimum still matters, and this pattern does not guarantee a fit at every width. [S2]

Test the component at its narrowest intended width and at widths just above and below the point where the arrangement changes. Confirm that the content remains visible, the container has no unwanted horizontal spill, and the columns do not become too cramped before they stack. If one long label or unbroken string still pushes out, inspect that item’s minimum size rather than just moving the breakpoint. A breakpoint is a layout choice based on the content-fit threshold; the references do not establish one universal threshold for all layouts. [S2][S3]