@YungJabo

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

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

Вот пустое место:
66e1a5ada9885307989823.png

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

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;
    }

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

Войдите, чтобы написать ответ

Похожие вопросы