Горизонтальный скролл при использовании grid?

Question

[skuvaWeb]

Начал учить гриды, вроде бы сделал элементарную сетку, но почему-то появляется горизонтальный скролл. Гугл не помог) Был бы благодарен за объяснение такого странного поведения
Codepen

Answer 1

[monochromer]

При процентном задании размеры рассчитываются без учета gap, поэтому лучше использовать fr-единицы
grid-template-columns: repeat(4, 1fr);

Answer 2

[Максим]

Вы применяете статические величины а надо применять фракцию т.е : 1fr и указать в grid-template-columns: 1fr 1fr 1fr 1fr;

https://codepen.io/topicstarter/pen/vvdVWG я гриды не учил .... но примерно так

И кстати - отличное пособие по grid : уроки

Comments

[skuvaWeb]

Мне кажется что ваше решение уж слишком костыльное, вряд ли в таком мощном инструменте как grid нужно уменьшать ширину карточки...
Все равно спасибо)

[Максим]

skuvaWeb, согласен ...просто костыль

[Максим]

skuvaWeb, а так : https://codepen.io/topicstarter/pen/vvdVWG