Debug: CSS grid items overflowing container

CSS Grid items are wider than their container, causing horizontal scroll or layout breakage.

Common causes and fixes:

1. Content wider than column (most common):

/* Problem: long words/URLs overflow */
.grid-item {
  /* Fix: allow word breaking */
  min-width: 0;       /* Override grid default min-width: auto */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Or prevent overflow */
.grid-item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

1. Grid using fr but min-width: auto prevents shrinking:

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

/* Fix: use minmax */
.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

1. Images or media not constrained:

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

1. Fixed width children:

/* Check for fixed widths inside grid items */
.grid-item pre {
  max-width: 100%;
  overflow-x: auto;
}

The key insight: grid items have min-width: auto by default, which means they won't shrink below their content size.

CSS Grid items default to min-width: auto, meaning content (long words, images, pre blocks) can force the item wider than its grid track.

CSS Grid layouts with dynamic content