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

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

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

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