Grid items overflow their container

What causes this

Grid items are breaking out of their container, causing horizontal scrollbars or layout issues. This happens because CSS Grid respects content size by default — if a grid item’s content is wider than its track, it overflows.

Common causes:

• Fixed-width columns that are wider than the viewport on mobile
• Long unbroken text (URLs, code, long words) pushing items wider
• Images without max-width: 100%
• grid-template-columns using fixed pixel values instead of flexible units
• Nested elements with explicit widths larger than the grid track

Fix 1: Use flexible columns with minmax()

/* ❌ Fixed widths overflow on small screens */
.grid {
  display: grid;
  grid-template-columns: 300px 300px 300px;
}

/* ✅ Flexible columns that wrap */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

minmax(250px, 1fr) means “at least 250px, but grow to fill available space.” auto-fit wraps items to the next row when they don’t fit.

Fix 2: Add min-width: 0 to grid items

By default, grid items have min-width: auto, which prevents them from shrinking below their content size:

.grid-item {
  min-width: 0; /* Allow items to shrink below content size */
}

This is the most common fix for overflow issues and is easy to miss.

Fix 3: Handle long text

.grid-item {
  /* Break long words */
  overflow-wrap: break-word;
  word-break: break-word;

  /* Or hide overflow */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* For code blocks inside grid items */
.grid-item pre {
  overflow-x: auto;
  max-width: 100%;
}

Fix 4: Constrain images

.grid-item img {
  max-width: 100%;
  height: auto;
}

Fix 5: Add overflow to the grid container

As a safety net:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  overflow: hidden; /* Prevent container from expanding */
}

How to prevent it

• Always use fr units or minmax() instead of fixed pixel widths for grid columns
• Add min-width: 0 to grid items as a default — it prevents most overflow issues
• Test your grid layouts on mobile viewports during development
• Use overflow-wrap: break-word on text-heavy grid items
• Check out our CSS Flexbox & Grid cheat sheet for responsive grid patterns