Build a responsive card grid without horizontal overflow

A card grid can look finished on a wide monitor and still fail on a phone. The problem is often a rigid minimum width, a long unbroken label, or an image that refuses to shrink. Build the layout around the content’s needs before choosing a fixed number of columns.

Start with a realistic card

For this experiment, imagine a gallery of construction projects. Each card contains a project name, a short description, and a photograph. Use one short title and one deliberately long title. Include enough description text to wrap onto several lines. This makes layout problems visible before the gallery is filled with production content.

Keep the markup simple: a section heading, a grid container, and one article per project. Use a heading inside each card and an ordinary link for the project destination. You can explore the structure in the Grid Generator and inspect the exported CSS in the code editor.

Let tracks adapt to the available width

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}
.project-card { min-width: 0; }
.project-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

In this example, 260 pixels is the preferred minimum card width. The inner minimum allows a track to fit when its container is even narrower. Remaining room is shared between the columns. You can change the preferred width after looking at the longest card title.

The image fills its card and has a consistent shape. The crop is a design decision, not a universally correct setting. Check whether it removes an important part of a project photograph; use a different crop or a natural image ratio when the full image matters.

Do not force every text block to the same height

A common shortcut is to give titles a fixed height so all buttons line up. That can cut off a long project name or leave an unnecessary empty space. First let the content grow naturally. If the design needs aligned actions, use a flexible card body rather than a rigid title box.

.project-card { display: flex; flex-direction: column; }
.project-card .body { flex: 1; padding: 20px; }
.project-card a { margin: 0 20px 20px; }
.project-card h3 { overflow-wrap: anywhere; }

Only use aggressive word wrapping where unusually long strings are expected. Normal words should still read naturally. Avoid hiding overflow across the whole page to conceal the underlying problem; that can also hide useful content and focus indicators.

Test a sequence of real conditions

1. Resize gradually from a wide gallery to one column. Look for the exact point where a track stops fitting.
2. Increase text size or browser zoom and inspect titles and links again.
3. Remove an image to see whether the card still communicates the project clearly.
4. Tab through the gallery and confirm that each link has a visible focus state.
5. Replace the samples with real project content and repeat the narrow-layout check.

Choose a breakpoint when the content asks for one

An automatic grid is a useful default for a gallery. It does not mean every page should avoid media queries. A featured project may need a different arrangement, or the card content may become too wide for comfortable reading. Make that change where the design stops working, rather than choosing a device label first.

For the underlying track-sizing concepts, consult MDN’s CSS Grid documentation. Keep a small test case alongside your project so you can inspect later style changes without unrelated page rules.