What the bug looks like

The grid looks correct in Chrome, but Safari shows columns overflowing, cards stretching, items wrapping strangely, or the page becoming wider than the screen.

Why it happens

Safari may expose minimum-size and overflow problems that were already inside your layout. Chrome may make the issue feel less obvious.

What usually fixes it

Use minmax(0, 1fr), add min-width:0 to grid children, control media width, and remove hidden overflow traps.

Why Safari makes CSS Grid bugs feel personal

Safari grid bugs feel personal because the layout usually passes the first test. You build the page in Chrome, resize it, check DevTools, and everything seems fine. Then someone opens the same page on an iPhone and the grid suddenly looks broken.

The trap is that Safari often reveals problems with minimum sizes, overflow, and flexible tracks more aggressively. The browser is not always the villain. Sometimes Safari is just showing you that one child element inside the grid was never allowed to shrink properly.

This overlaps with common FrontFixer problems like CSS Grid breaking on mobile and horizontal scroll on mobile.

Common signs the problem is inside the grid

Why this can break on Safari

At first, 1fr 1fr looks completely normal. The problem appears when the content inside one column has a minimum width larger than the available space.

A key detail is that grid and flex items often have an automatic minimum size. In practice, that means the browser may treat the item as if min-width:auto is protecting its content, instead of letting the column shrink freely.

Safari can make this feel more obvious because it may expose intrinsic sizing problems that Chrome appears to tolerate more smoothly.

Safari may let that content push the grid wider instead of shrinking the column the way you expected. The result can be overflow, broken cards, or a layout that looks too wide on mobile.

Simple rule: when grid columns must shrink, do not blindly trust plain 1fr. Give the track permission to shrink.

Before: Safari exposes the overflow

The second item has content that refuses to shrink. On Safari, this can push the whole grid wider than the screen.

After: the grid is allowed to shrink

Using minmax(0, 1fr) and min-width:0 gives the layout permission to shrink instead of exploding sideways.

Why minmax(0, 1fr) works

minmax(0, 1fr) tells the browser that the column is allowed to shrink all the way down to zero before distributing free space. That prevents hidden minimum content sizes from controlling the whole grid.

Pairing this with min-width:0 on grid children gives the content permission to shrink inside the column instead of forcing the entire layout wider.

Use minmax(0, 1fr)

This helps Safari shrink flexible columns instead of allowing content to secretly define the minimum track width.

Add min-width:0

Grid children often need explicit permission to shrink when they contain long text, buttons, images, code blocks, or nested layouts.

Control media width

Images, videos, iframes, and code blocks should not be allowed to force the grid wider than the viewport.

Why images can break the grid

A large image inside a grid item can force the column wider if the image is not constrained. Safari may make this more visible, especially on smaller screens.

A safe image reset helps the image stay inside the grid item instead of pushing the whole layout outward.

Why auto-fit and auto-fill can also go wrong

Responsive grid patterns like repeat(auto-fit, minmax(280px, 1fr)) are useful, but they can still break when the minimum column size is too wide for the viewport.

On a narrow screen, a minimum like 320px plus padding, gap, border, or wrapper spacing may exceed the available width. Safari then appears to break the grid, but the math was already too tight.

Long content can force Safari overflow

Code blocks, long URLs, long words, table content, and unbroken strings can force a grid item wider than expected.

The fix is not always to change the grid. Sometimes the child content needs overflow control so the grid column can stay within the layout.

pre {
  max-width: 100%;
  overflow-x: auto;
}

.grid > * {
  min-width: 0;
}