grid-template-columns: 3fr 4fr 5fr;
и здесь grid-template-columns: repeat(12, 1fr);
— две разные сетки. В первом случае сетка из трёх колонок разной ширины, во втором — из 12. Общая ширина колонок, из которой и считается fr, равна ширине контейнера за вычетом общей ширины гапов. Если число колонок разное, совершенно очевидно, что и общая ширина колонок, а вместе с ней и значение 1fr, будут меняться. Поэтому и нужна сетка с фиксированным числом колонок, обычно их 12.