Fix CSS Grid Breaking on Mobile

by

CSS Grid usually breaks on mobile when the grid tracks, gaps, or child elements demand more width than the screen can provide. The fix is not always abandoning Grid. The real fix is making the grid tracks flexible, letting children shrink, and giving mobile a simpler layout when space gets tight.

CSS Grid Mobile Fix

Why Is My CSS Grid Breaking on Mobile?

CSS Grid can look perfect on desktop and then suddenly crush cards, create horizontal scroll, squeeze content, or refuse to stack on phones. Most of the time, Grid is not broken. The layout is simply asking small screens to carry desktop-sized columns, gaps, or children.

Browse CSS Fixes Browse All Fixes
  • Grid overflow bugs
  • Mobile track sizing
  • minmax and min-width fixes

What the bug looks like

Cards become tiny, text spills out, the page scrolls sideways, or the grid looks cramped and unstable on mobile.

Why it happens

The track sizing is too ambitious for the available width, or one child inside the grid refuses to shrink.

What fixes it

Use safer track sizing, reduce columns on mobile, control gaps, and add min-width:0 where grid children need to shrink.

The simple rule behind CSS Grid mobile bugs

A grid breaks on mobile when the total width requested by columns, gaps, padding, and child content is larger than the space available.

This can happen with obvious code like grid-template-columns: repeat(3, 300px), but it can also happen with elegant-looking rules like repeat(auto-fit, minmax(320px, 1fr)).

The fastest fix is usually to reduce the grid’s minimum demands and make the children flexible enough to fit.

Error 1

The grid keeps desktop columns on mobile

A desktop grid can look great at full width, but if it keeps three columns on a phone, the cards become cramped or overflow. Mobile usually needs a simpler column structure.

Broken code

Desktop grid only 
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Broken visual result

Three columns are squeezed
CardToo narrow.
CardToo narrow.
CardToo narrow.

Correct code

Mobile stack 
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

Fixed visual result

Cards stack cleanly
Card oneFull mobile width.
Card twoFull mobile width.
Card threeFull mobile width.
Error 2

The minmax() minimum is too large

auto-fit and minmax() are powerful, but they can still create mobile overflow if the minimum value is too ambitious for the real container width.

Broken code

Minimum too wide 
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

Broken visual result

320px track is too demanding
320px minimumToo wide once padding is included.

Correct code

Safer minimum 
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
}

Fixed visual result

Track can respect the container
Safe minimumThe track can fit the available width.
Error 3

The grid child refuses to shrink

Sometimes the columns are fine, but one child inside the grid refuses to shrink. This commonly happens with long text, nested flex items, code blocks, images, and buttons.

Broken code

Child is too wide 
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.card-title {
  white-space: nowrap;
}

Broken visual result

Child forces the grid wider
VeryLongUnbrokenGridCardTitle Cannot shrink safely.

Correct code

Child can shrink 
.card {
  min-width: 0;
}

.card-title {
  overflow-wrap: anywhere;
}

Fixed visual result

Child stays inside the grid
VeryLongUnbrokenGridCardTitle The content can wrap and the card can shrink.
Error 4

Gap and padding push the grid over the limit

A grid may almost fit on mobile, but large gaps and container padding can reduce the usable width enough to create horizontal overflow.

Broken code

Spacing too large 
.wrapper {
  padding: 32px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, 145px);
  gap: 28px;
}

Broken visual result

Spacing eats the mobile width
CardAlmost fits.
CardBut gap pushes it.

Correct code

Mobile spacing 
.wrapper {
  padding: 16px;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

Fixed visual result

Spacing fits the screen
Card oneClean spacing.
Card twoNo overflow.
Error 5

Images and media are wider than the grid item

Images, videos, iframes, and embeds can break a grid when they do not respect the width of their card. The track may be correct, but the media inside it can still overflow.

Broken code

Media overflow 
.card img {
  width: 520px;
}

Broken visual result

Media is wider than the card
Fixed-width image area The image forces the card wider than the viewport.

Correct code

Fluid media 
.card img,
.card video,
.card iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

Fixed visual result

Media respects the card
Fluid media area The media can scale down inside the grid item.

Fast practical rule

If CSS Grid is breaking on mobile, reduce the grid’s minimum demands first. Fewer columns, smaller gaps, flexible children, and min-width:0 solve more mobile Grid bugs than complicated track math.

Recommended baseline

Mobile-safe grid

This baseline gives the grid flexible tracks, allows children to shrink, keeps media fluid, and creates a simple mobile fallback. 

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.card {
  min-width: 0;
}

.card img,
.card video,
.card iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

.card-title,
.card-url,
.card-label {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

Why this baseline helps

It removes rigid track pressure minmax(0, 1fr) gives grid columns permission to shrink.
It protects against stubborn children min-width:0 helps grid items stop forcing overflow.
It makes media responsive Images, videos, and embeds stay inside their cards.
It gives mobile a clean fallback One column is often the safest and most readable mobile layout.

Debug checklist

  • Inspect the grid at the exact width where it first breaks.
  • Check whether the grid keeps too many columns on small screens.
  • Look for fixed track sizes like 300px, 320px, or aggressive minmax() values.
  • Add min-width:0 to grid items that contain long text, nested flex rows, images, or code blocks.
  • Check whether gaps and parent padding are making the usable width too small.
  • Make images, videos, iframes, and embeds fluid with max-width:100%.
  • Use overflow-wrap:anywhere for long strings, URLs, labels, and titles.
  • Switch to one column on mobile before trying more complex responsive grid formulas.
Best first move Temporarily set the grid to one column on mobile. If the bug disappears, your issue is track pressure or child overflow.
Most common false fix Rewriting the whole grid when one child simply needs min-width:0 or safer wrapping.
Most overlooked cause Big gaps and parent padding can make an otherwise reasonable grid overflow on a small screen.
Better mindset Mobile grids should be readable first and clever second. Predictable beats fancy when space is tight.

When overflow is the real problem

Sometimes Grid looks broken because one child is wider than the viewport. The grid is only revealing an overflow problem that already exists inside the content.

If the page scrolls sideways, read Fix overflow causing horizontal scroll.

When responsive design is the wider problem

If more than one section breaks on mobile, the issue may not be only Grid. The page may need a stronger responsive foundation.

In that case, read Why is my responsive design not working?.

When flex items inside the grid are the problem

A grid card can contain a flex row that refuses to shrink. That nested flex behavior can make the grid look guilty even when the grid track is fine.

If a nested flex child is involved, read Fix flex item shrinking with fixed width.

When the HTML structure is fighting the layout

Extra wrappers, missing containers, or weak grouping can make a grid harder to control across screen sizes.

If CSS patches keep failing, read Fix HTML structure problems.

Related fixes that can help

If your CSS Grid problem is part of a bigger responsive layout issue, these FrontFixer guides are the next places to check.

Fix overflow causing horizontal scroll Use this when a grid child or page section is wider than the viewport. Read this fix
Why is my responsive design not working? Use this when multiple sections fail on mobile, not only one grid. Read this fix
Fix flex item shrinking with fixed width Use this when a nested flex item inside a grid card causes overflow. Read this fix

Final takeaway

CSS Grid breaking on mobile is usually not a sign that Grid is unreliable. It is a sign that the layout is demanding more width than the screen can give.

Relax the track sizing. Let children shrink. Reduce gaps when needed. Make media fluid. Give mobile a simpler fallback before adding more clever formulas.

Once the grid’s minimum demands are realistic, CSS Grid becomes predictable again.

Need more CSS fixes?

Browse the CSS cluster or jump back to the full FrontFixer library to keep debugging faster.

CSS Fixes All Fixes

Leave a Comment