Почему grid элементы не до конца заполняют контейнер?

Question

[YungJabo]

Хочу сделать элементы в 2 строки и через 1fr заполняю их на все пространство. Но почему-то справа остается место, которое они не заполняют.

Вот пустое место:


И еще в похожем grid контейнере пустое место:


SCSS Projects:

.projects{
    margin-top: 214px;
    &__list{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
        row-gap: 62px;
    }
    &__item{
        box-shadow: 2px 2px 100px 0px rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        width: 375px;
        overflow: hidden;
        &__about{
            padding: 27px 30px;
        }
        &__title{
            font-size: 28px;
            margin-bottom: 17px;
        }
        &__subtitle{
            color: rgba(102, 102, 102, 1);
            margin-bottom: 12px;
            font-size: 18px;
            max-width: 314px;

        }
        &__stack{
            font-size: 14px;
            color: rgba(102, 102, 102, 1);
            margin-bottom: 21px;
            &--bold{
                color: #42446E;
                font-size: 16px;
                font-weight: 400;
            }
        }
        &__links{
            display: flex;
            justify-content: space-between;
            img{
                width: 20px;
                height: 20px;
            }
        }
        &__link-block{
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 16px;
            &__link{
                text-decoration: underline;
            }
        }
    }
}

SCSS STACK:

.stack{
    margin-top: 350px;
   
    &__item{
        width: max-content;
    }
    &__list{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(6,1fr);
        grid-template-rows: repeat(2, auto);
        row-gap: 90px;
        column-gap: 100px;
    }

}

Comments

[Ivan Ustûžanin]

лучше бы не скриншоты и простыню кода вывалили, а привели воспроизводимый пример на каком-нить codepen-е

это я к тому, что без разметки что-то говорить сложно

но как вариант вангования: display: block; для __item может оказаться не лишним, вместо имеющегося там по умолчанию list-item, который по идее должен перебиваться grid-ом для детей, но с элементами списка — фиг его знает

[Wispik]

у тебя у итема жестко ширина задана в 375px, отсюда и проблема

[Ivan Ustûžanin]

так, стоп, напуркуа у айтемов задана фиксированная ширина? ЕМНИП она и не даёт айтему разрастись на всю ширину

[YungJabo]

Ivan Ustûžanin, А как мне тогда с помощью grid сделать на всю ширину элементы? Ну и допустим, я хочу чтобы ширина фиксированной осталось. Я понимаю, что если я уберу у item фикс ширину и сделаю его на дочерний элемент, то тогда у меня item растянется на всю ширину. Проблема не решится, тк у меня дочерний элемент как был слева внутри item, так и останется. Сам-то item пусть растягивается.

Вот ссылка на Pages:
https://yungjabo.github.io/test/

[Wispik]

YungJabo, зачем нужна фиксированная ширина?
чтобы все норм было, достаточно у item убрать фиксированную ширину. И добавить для сетки column-gap и все

[YungJabo]

Wispik, Открой по ссылке:https://yungjabo.github.io/test/
Посмотри, у меня фикс для item, потому что картинка такой же ширины должна быть. У меня просто сам по себе элемент разве не может быть 375px? Я хочу чтобы элементы были фикс и растягивалось на весь контейнер, как вся страница.

[Ivan Ustûžanin]

YungJabo, элементы на всю ширину и с фиксированной шириной как бы оксюморон

если хочется фиксированной ширины элементов, то не следует использовать fr в описании столбцов, остановившись на auto, и в дополнение использовать justify-content: center; для выравнивания всего грида по горизонтали по центру

[YungJabo]

Ivan Ustûžanin, Спасибо, я разобрался. Поставил justify-content: space-between

[Ivan Ustûžanin]

YungJabo, ЕМНИП именно из-за значения по умолчанию stretch у justify-content оно так себя и ведёт при auto в столбцах

[DIVSIDE]

Удалить width: 375px; у итемов... У них у всех фикс размер. Судя по всему, меньше чем колонки.

Answer 1

[xxxANTxxx]

В сетке где 3 колонки проблема скорее всего связана с тем что вы указали фиксированный width: 375px; для item. Если удалить этот стиль, то скорее всего будет как надо.
Во второй сетке где 6 колонок проблема может быть из-за самого изображения для VK. Если изображение уже с отступом, то грид тут не причём, нужно изображение ровнять.
И я надеюсь это у вас не BEM методология, иначе вам нужно подробнее её изучить.