Agora que entendi o problema, confundi totalmente horizontal com vertical kkk (sempre faço isso).
Realmente, o scroll horizontal não poderia estar aparecendo, o problema é:
Criamos quatro colunas com a largura de 25%, mas, veja que a gente tem um espaçamento entre elas de .2rem.
Dessa maneira, precisamos tirar esse espaçamento na hora de definir a largura das colunas:
grid-template-columns: calc(25% - .2rem) calc(25% - .2rem) calc(25% - .2rem) calc(25% - .2rem);
Mas, dessa maneira a gente vai ter um pequeno problema, as colunas vão ficar pequenas demais e vai existir uma sobra na última coluna.
Para resolver o problema, podemos usar uma nova unidade de medida que veio com o Grid Layout, a fr:
grid-template-columns: 1fr 1fr 1fr 1fr;
fr é uma unidade de fração, ou seja, 1fr será uma parte do espaço disponível. Dessa maneira, estamos falando:
Olha, ocupa quatro espaços disponíveis, independe do tamanho, apenas preenche os quatro espaços que sobraram.
Também podemos economisar a digitação e usar a função repeat:
grid-template-columns: repeat(4, 1fr);
Passamos a quantidade de colunas e o tamanho de cada uma.
Obs: Excelente observação, parabéns.
Espero ter ajudado, desculpa pela falha.
