The grid inspector is the only way to debug this

Grid places items in tracks that have no representation in the DOM, so a misplaced item cannot be explained by inspecting elements — there is nothing to inspect between them.

// Firefox: Inspector → Layout → Grid → overlay the container
// Chrome:  Elements → the 'grid' badge next to the container

// and in code, to see what the browser computed
getComputedStyle(el).gridTemplateColumns;
// "264px 712px 224px"  — resolved, not the fr you wrote

The computed value resolving fr to pixels is the useful check when a track is not the width you expected. Firefox’s overlay is considerably better than Chrome’s this year — it shows line numbers, names and the gaps — and is worth switching browsers for when a layout is not behaving.