Grid repeat 3 columns breaks mobile layouts when a fixed three-column CSS Grid stays active on narrow screens instead of changing to two columns, one column, or an auto-fit pattern.
CSS Grid Mobile Fix
Why does repeat(3, 1fr) break on mobile?
repeat(3, 1fr) breaks on mobile when a grid keeps three columns even though the available width is too small. The browser does not automatically decide that three columns should become one column. It follows the CSS you wrote: three tracks, each sharing the available space. If the container becomes narrow, the columns either become tiny, overflow because of their content, or make the whole page feel squeezed.
The bug usually starts on desktop because grid-template-columns:repeat(3, 1fr) looks clean there. Three cards line up beautifully. The problem appears when that same rule reaches tablet, mobile, or a narrower content container. A grid that was elegant at 1200px can become unreadable at 390px.
- CSS Grid
- repeat(3, 1fr)
- Mobile layout
- Responsive columns
Test the grid at real mobile width
Resize the page slowly and watch the moment the three-column grid stops looking like a layout and starts looking like a trap. That breakpoint tells you where the grid needs a different column rule.
Related: Try this in the FrontFixer Live Inspector.
Open Live Inspector→What the bug looks like
Cards, products, posts, or feature boxes stay in three columns on a narrow screen.
Why it happens
repeat(3, 1fr) is a fixed column count. It does not automatically become responsive.
What usually fixes it
Change the column count at smaller widths or use auto-fit with a safe minimum.
Why three equal columns are not always responsive
The word 1fr makes a column feel flexible, but the number of columns is still fixed. repeat(3, 1fr) means “create three equal tracks.” It does not mean “create three tracks when there is room and fewer tracks when there is not.” That difference matters on mobile.
A three-column grid can fail in two different ways. Sometimes it technically fits, but each card becomes so narrow that the content looks broken. Other times, the content inside a column has a minimum width and pushes the grid wider than the viewport. Both problems come from using a desktop column count without a mobile strategy.
The clean fix is to define when the layout should change. That can be a media query, a container-aware rule, or a more fluid pattern using repeat(auto-fit, minmax(...)). The important thing is that the grid needs permission to stop being three columns.
1fr shares spaceIt does not choose the number of columns for you.The desktop three-column grid stays active on mobile
The most common mistake is using repeat(3, 1fr) for a card grid and never changing it. On mobile, the browser keeps three columns because that is the rule. The cards become too narrow or overflow depending on their content.
Broken code
Desktop rule everywhere.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Broken visual result
The desktop three-column structure stays active.
Correct code
Mobile fallback.cards {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 700px) {
.cards {
grid-template-columns: repeat(3, 1fr);
}
}Fixed visual result
The mobile layout starts with one readable column.
Gap and padding leave too little space for each column
Even when the grid does not technically overflow, the cards can become unusable. Three columns plus two gaps plus container padding can leave each card with a tiny width. The layout is not broken by syntax; it is broken by available space.
Broken code
Too many tracks.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
padding: 20px;
}Broken visual result
The gap consumes width before the cards get space.
Correct code
Responsive gap and columns.products {
display: grid;
grid-template-columns: 1fr;
gap: clamp(12px, 3vw, 22px);
padding: clamp(12px, 3vw, 20px);
}
@media (min-width: 760px) {
.products {
grid-template-columns: repeat(3, 1fr);
}
}Fixed visual result
The grid uses fewer columns and softer spacing on small screens.
Long content inside a 1fr column forces overflow
Sometimes repeat(3, 1fr) fails because one column contains content that will not shrink. Long product names, URLs, labels, code, or buttons can create a minimum width that pushes the track wider than the container.
Broken code
Content controls track.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card-title {
white-space: nowrap;
}Broken visual result
A long title can make the track wider.
Correct code
Tracks and content can shrink.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card {
min-width: 0;
}
.card-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Fixed visual result
The track can shrink and the title is handled inside the card.
minmax(0,1fr) and min-width:0 when content needs to stay inside grid tracks.The grid is inside a narrower parent
A grid can break even before the viewport gets small if it lives inside a narrow parent. A sidebar, tab panel, modal, article column, or card body may be much narrower than the full page. A three-column grid inside that parent needs to respond to the parent’s available width.
Broken code
Viewport thinking only.sidebar-widget .links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}Broken visual result
The nested grid has less room than the page.
Correct code
Container-safe pattern.sidebar-widget .links {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 120px), 1fr));
gap: 8px;
}
.sidebar-widget .link {
min-width: 0;
}Fixed visual result
The nested grid chooses fewer columns inside the parent.
A production-minded responsive grid pattern
A premium grid does not force three columns everywhere. It starts with readable mobile behavior, then expands as space allows. The safest pattern combines auto-fit, minmax(), responsive gaps, and min-width:0 on the card content.
Premium code
Fluid card grid.card-grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: clamp(14px, 2vw, 24px);
}
.card-grid > * {
min-width: 0;
}
.card-title {
overflow-wrap: anywhere;
}
.card-media {
aspect-ratio: 16 / 9;
object-fit: cover;
}Premium visual result
The grid adds columns only when each card has enough room.
Fast practical rule
Use repeat(3, 1fr) only when you know the container has room for three readable columns. For mobile, start with one column or use auto-fit with minmax(). Three equal columns are a desktop pattern, not a universal responsive rule.
Debug checklist
- Search for
grid-template-columns:repeat(3, 1fr). - Check whether the same rule is active on mobile.
- Resize slowly and find where three columns stop being readable.
- Account for gap, padding, and container width, not only viewport width.
- Use a mobile-first one-column default when readability matters.
- Use
repeat(3, minmax(0, 1fr))when long content causes track overflow. - Add
min-width:0to grid children that contain long content. - Use
auto-fitwithminmax(min(100%, ...), 1fr)for more flexible components.
grid-template-columns:1fr and compare the result.When repeat(3, 1fr) is still okay
repeat(3, 1fr) is not wrong by itself. It is a clean desktop rule when the container is wide enough and the content inside each card is controlled. It becomes risky when it is treated as a complete responsive strategy.
A strong production layout may still use three columns at larger widths. The difference is that it also defines what happens before that point. Mobile might use one column. Tablet might use two. Desktop might use three. Or the grid might use auto-fit and let the component decide based on available space.
The authority move is not to avoid three columns forever. The authority move is to stop forcing three columns when the user’s screen, parent container, or content says the layout needs fewer.
Why this bug survives desktop review
A three-column grid can look perfect while you are building on a wide screen. That is why this bug often survives until the final mobile check. The layout is not visually broken at first; it is only waiting for the container to become narrow enough.
The safest habit is to inspect the grid at the component level. Check the width of the actual grid parent, not only the browser window. If the parent is a content column, modal, sidebar, tab panel, or card body, it may need fewer columns much earlier than the full page does.
Final takeaway
repeat(3, 1fr) breaks on mobile because it keeps a fixed three-column structure inside a space that may only support one or two readable columns. The 1fr unit shares space, but it does not choose a better column count.
Use three columns when the container has room. Use one column, two columns, or auto-fit when it does not. That turns CSS Grid from a desktop-only layout into a responsive system that respects the user’s screen and the component’s real width.
