Несколько причин, по которым элементы в CSS grid могут выходить за пределы контейнера:

• Указание gap-ов в процентах. 1 Если высота grid-контейнера установлена в автоматическое значение по умолчанию, то она высчитывается из высоты содержимого, то есть из суммы высот строк. 1 Только после этого высчитывается процентное значение высоты gap-ов. 1 Сумма высот этих gap-ов и есть та самая высота, на которую элементы выходят за границу. 1
• Использование свойства box-sizing: border-box. 2 Если установить для контейнера границу, например, 3px, это сдвинет элементы внутри контейнера вправо, но ширина контейнера при этом не изменится. 2

Чтобы элементы не выходили за контейнер, рекомендуется корректно использовать свойство grid-template-columns и все возможности Grid Layout. 4