Why does grid-gap cause an overflow?

Question

Why do I have an overflow on the X axis in the following snippet?

The overflow is generated once I apply grid-gap: 10px on my .body grid co

Answer 1

If you want to use percentages or some other unit, there is one more solution. The use of the minmax() function will allow the columns to shrink to fit the parent container and not cause overflow.

The solution would look like this:

grid-template-columns: minmax(auto, 25%) minmax(auto, 50%) minmax(auto, 25%);
gap: 10px;

More on the minmax() function here.