Your CSS Grid is wider than the page. You get a horizontal scrollbar. One card is hanging off the edge. Or the layout looks fine until a long URL, an image or one awkward piece of content gets added.

So you try:

overflow: hidden;

The scrollbar disappears. Problem solved? Not necessarily. You've hidden the evidence.

When CSS Grid overflows, something is usually telling the browser: "I need more space than you've given me." The fastest way to fix it is to find out what is making that demand.

Find the culprit
Card one
averyveryveryverylongfilenamewithoutspaces.css
Card three
This item cannot shrink enough
.card { min-width: 0; }

The element crossing the boundary is often more useful than the scrollbar itself.

1. One Grid item refuses to shrink

This is one of the strangest Grid overflow problems because your column sizing can look completely reasonable. For example:

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

Two flexible columns. Nothing is fixed. So why can one column still become too wide? Because the track isn't the only thing involved. A Grid item can have a minimum size based on its content. That means a long URL, an unbroken string or another wide child can effectively say: I can't get any narrower than this.

Cause

Grid items can have an automatic minimum size based on their content, which can prevent an item from shrinking as far as you expect - even with flexible tracks.

Fix

Where it makes sense for the design, allow the item to shrink with min-width: 0; then deal with the content, e.g. overflow-wrap: anywhere;

Before / after
Item won't shrink
Item can shrink

2. Your 1fr column isn't as shrinkable as you thought

This catches a lot of people. You write grid-template-columns: 1fr 1fr; and assume both columns can shrink as much as they need to. But 1fr doesn't always mean "shrink all the way to zero." Content sizing still matters. That's why a common defensive pattern is minmax(0, 1fr) minmax(0, 1fr).

Cause

A flexible Grid track can still be influenced by the minimum size of the content inside it.

Fix

When you genuinely want the track to shrink below that automatic content-based minimum, make the minimum explicit with minmax(0, 1fr).

.grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);
}

This makes the minimum explicit - zero is allowed. The track can then use its fraction of the available space without the automatic minimum unexpectedly making it wider. This is also a recurring solution in Grid overflow troubleshooting.

3. Your minmax() minimum is wider than the container

Maybe you've already made the Grid responsive.

.grid {
  grid-template-columns:
    repeat(auto-fit, minmax(320px, 1fr));
}

It works beautifully. Until the Grid appears somewhere narrower than 320 pixels. Then one card sticks outside the container.

Cause

You explicitly told the browser this track must be at least 320px wide. If its container is only 280px wide, there isn't enough room to satisfy that rule. minmax() isn't failing - it's doing exactly what you asked.

Fix

If the component may become narrower than your preferred minimum, let that minimum respect the available space.

.grid {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(min(100%, 320px), 1fr)
    );
}
280px container
minmax(320px, 1fr)
minmax(min(100%, 320px), 1fr)
If minmax() still feels unpredictable, read How CSS Minmax Stops Your Grid From Falling Apart.

4. An image is wider than its Grid item

Sometimes the offender is much easier to spot. You add an image. The Grid gets wider. Images, videos and other embedded content can bring their own dimensions into the layout.

Cause

The media itself is allowed to render wider than the space available inside its Grid item.

Fix

For normal responsive images, a useful default is img { max-width: 100%; height: auto; } so the image scales down instead of forcing its Grid item wider.

Before / after
Before
After

5. Your fixed widths and gaps simply don't fit

Sometimes there isn't a mysterious browser behaviour. The maths just doesn't fit. Imagine:

.grid {
  display: grid;
  grid-template-columns:
    280px 280px 280px;
  gap: 32px;
}
280 + 280 + 280 = 840px tracks
32 + 32 = 64px gaps
Grid needs 904px total

Put it inside an 800-pixel container and it has nowhere to go.

Cause

The total width of the tracks and gaps is larger than the available width.

Fix

Decide what should actually be flexible - repeat(3, minmax(0, 1fr)), or repeat(auto-fit, minmax(220px, 1fr)) if the number of columns should change.

6. overflow: hidden may only be hiding the symptom

When a layout is spilling sideways, this is tempting:

body {
  overflow-x: hidden;
}

Now there is no scrollbar. But the element that caused the problem may still be wider than the page. Part of your content may simply be clipped where nobody can see it.

Cause

You've changed how the browser displays the overflow without fixing the thing producing it.

Fix

Before hiding overflow, identify why the content is wider than its container - check Grid track widths, minmax() minimums, min-width, images, long text, fixed-width children and nested layouts.

There are situations where hiding or scrolling overflow is intentional. Just make sure it is a design decision rather than a way of making a debugging clue disappear.

Sometimes horizontal scrolling is the design

Not every overflowing layout is broken. You may deliberately want a horizontal gallery, a row of cards, a timeline, a data table or a carousel-style component. In those cases, the scrollable area should normally be contained deliberately, rather than making the entire page wider.

.scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  overflow-x: auto;
  gap: 16px;
}

Now the horizontal scrolling belongs to that component. The whole document doesn't have to scroll sideways. The CSS Grid specification explicitly allows overflow behaviour on Grid containers, so overflow is not inherently an error. The question is: did you mean for it to happen?

Still staring at your Grid wondering what's actually causing it? Grid problems get much easier once you stop changing random values and start isolating the rule that's producing the behaviour. Open Grid Detective →

Check these before you hide the scrollbar

If your CSS Grid is overflowing, work through these in order.

  1. 1
    Find the element crossing the boundary - don't start with the CSS, start with the visible culprit
  2. 2
    Check whether a Grid item can shrink - try min-width: 0 where appropriate
  3. 3
    Check your flexible tracks - if 1fr is still being pushed wider by content, consider minmax(0, 1fr)
  4. 4
    Check your minmax() minimum - a 320px minimum cannot fit inside a 280px container without compromise
  5. 5
    Check images and other embedded content - make sure the thing inside the card is actually allowed to resize
  6. 6
    Add up your fixed widths and gaps - sometimes the Grid simply needs more pixels than exist
  7. 7
    Ask whether the overflow is intentional - a component can scroll horizontally on purpose; the whole page doing it unexpectedly is usually a clue
Why this matters

CSS overflow is often treated like a cosmetic problem. But the scrollbar is usually only the symptom. If you can identify which track or item is demanding too much space, the fix becomes much more obvious - and it's a much better debugging habit than adding overflow: hidden until the problem disappears.

When a Grid breaks, you shouldn't have to rewrite half your layout just to find the bad rule. Find the thing causing the problem. Understand why it cannot shrink. Then fix that. That's exactly the kind of problem Grid Detective is designed to help you practise spotting.