Grid column overflowing problems usually happen when CSS Grid columns use 1fr without minmax(0,1fr), fixed widths, long text, images, percentage columns plus gap, or missing responsive grid rules.
CSS Grid Overflow Fix
Why is my grid column overflowing?
A grid column overflowing can make a card stick out of the layout, create mobile horizontal scroll, cut off content, or make the whole page wider than the screen. The confusing part is that 1fr sounds flexible, but grid items still have automatic minimum sizes. Long text, images, fixed columns, and gaps can force a grid column wider than you expected.
- CSS Grid
- minmax(0, 1fr)
- Long text
- Mobile overflow
What the bug looks like
One grid column pushes outside the container, the last card is cut off, or the page gets horizontal scroll.
Why it happens
Grid tracks and grid items have minimum sizing behavior that can be stronger than the flexible layout you expected.
What usually fixes it
Use minmax(0,1fr), min-width:0, responsive minmax() tracks, and safe image/text rules.
1fr columns are being pushed by long content
A grid column can overflow even with 1fr because the grid item’s automatic minimum size may be based on its content. Long text can force the column wider unless the track and item are allowed to shrink.
Broken code
1fr can still overflow.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.card-title {
white-space: nowrap;
}Broken visual result
Long content makes the first column wider than expected.
1fr does not automatically mean “ignore long content.”Correct code
minmax + min-width.grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
}
.grid > * {
min-width: 0;
}
.card-title {
overflow-wrap: anywhere;
}Fixed visual result
The column is allowed to shrink and the content can wrap safely.
minmax(0,1fr) tells the grid track it can shrink below the content’s automatic minimum.Fixed grid columns are too wide for mobile
Fixed grid columns can look clean on desktop and break immediately on smaller containers. If the container is narrower than the combined column widths and gaps, the grid will overflow.
Broken code
Fixed desktop columns.grid {
display: grid;
grid-template-columns: 220px 220px;
gap: 12px;
}Broken visual result
The columns keep desktop widths inside a smaller container.
Correct code
Responsive columns.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
gap: 12px;
}
.grid > * {
min-width: 0;
}Fixed visual result
The grid can reduce columns or stack before overflowing.
minmax() tracks instead of fixed desktop columns.Percentage columns plus gap are wider than the container
Two columns at 50% already equal the full container width. If you add a gap between them, the grid becomes wider than the container unless the column math accounts for the gap.
Broken code
100% + gap.grid {
display: grid;
grid-template-columns: 50% 50%;
gap: 18px;
}Broken visual result
The columns already take 100%, then the gap makes the grid too wide.
Correct code
fr columns include gap better.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.grid > * {
min-width: 0;
}Fixed visual result
The columns share the remaining space after the gap is considered.
An image inside the grid column is wider than the column
Sometimes the grid column is not the original problem. A child image, card, table, code block, or button inside the column is wider than the column and forces the grid track to expand.
Broken code
Image forces width.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.card img {
width: 260px;
}Broken visual result
The image is wider than the grid column can safely hold.
Text
Correct code
Media respects column.grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.card img {
display: block;
max-width: 100%;
height: auto;
}Fixed visual result
The image is constrained by the column instead of expanding it.
Text
A production-minded CSS Grid column pattern
A reliable grid pattern gives columns a safe minimum, allows child content to shrink, wraps long text, constrains media, and uses responsive tracks instead of fixed desktop assumptions.
Premium code
Safe responsive grid.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: clamp(12px, 2vw, 24px);
}
.grid > * {
min-width: 0;
}
.grid img,
.grid video {
display: block;
max-width: 100%;
height: auto;
}
.grid h3,
.grid p,
.grid a {
overflow-wrap: anywhere;
}
@media (max-width: 520px) {
.grid {
grid-template-columns: 1fr;
}
}Premium visual result
The tracks, content, media, and gap all respect the container.
Fast practical rule
If a grid column is overflowing, try grid-template-columns:minmax(0,1fr) and min-width:0 on the grid child before using overflow-x:hidden. Then check long text, images, fixed widths, and percentage columns plus gap.
Debug checklist
- Inspect the grid columns and check whether
1frtracks needminmax(0,1fr). - Add
min-width:0to grid children that contain long text or nested content. - Look for fixed column widths that are too large for mobile containers.
- Avoid
50% 50%plus gap unless the gap is accounted for. - Check images, videos, tables, code blocks, and buttons inside the grid column.
- Use
max-width:100%on media inside grid items. - Use
overflow-wrap:anywherefor long words, URLs, or unbreakable labels. - Use responsive grid tracks like
auto-fitwithminmax().
1fr with minmax(0,1fr) on the overflowing track.
50% 50% columns plus gap quietly become wider than 100%.
Final takeaway
A grid column overflowing is usually caused by minimum sizing, not by CSS Grid being broken. The column is being forced wider by long content, fixed widths, percentage tracks plus gap, or media that does not respect the column.
Start with minmax(0,1fr) and min-width:0. Then make text, images, gaps, and responsive tracks safe. That fixes the real grid overflow instead of hiding it.