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 have a fixed number of grid columns that should be the same width and use grid-gap, there's a way to do it:

display: grid;
grid-template-columns: repeat(4, calc(25% - 0.75em));
grid-gap: 1em;

In this case, each row would have 4 grid columns, and the total space occupied by grid-gap would be 3em. In order to distribute the overflowing space evenly, divide the space by the number of grid columns.

3em / 4 = 0.75em

This makes all the grid columns have the same width.

Codepen demo