Как отцентрировать сетку, содержащую повторение (автоподгонка, minmax (15rem, 1fr));

Question

Я заканчиваю сайт портфолио, но столкнулся с проблемой.Я использовал функцию авто-подгонки, потому что я хочу, чтобы она была отзывчивой, и я буду добавлять туда новые изображения каждый месяц.

Я обнаружил, что не могу центрировать его так, как хочу, потому что сетка заполняет пустое пространство дополнительными столбцами, которые мне сейчас не нужны, поэтому моя сетка целует левую сторону моего сайта.Пожалуйста, помогите, ребята, вы лучшие!:)

<section class="projects">
    <h2 class="h2">Projects</h2>

    <div class="projects__part">
        <h4 class="h4">Primary projects</h4>
        <div class="projects__item">
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"  class="projects-item__img">
        </div>

        <div class="projects__item">
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"  class="projects-item__img">
        </div>

        <div class="projects__item">
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"  class="projects-item__img">
        </div>
    </div>

    <div class="projects__part">
        <h4 class="h4">Secondary projects</h4>

        <div class="projects__item">
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"  class="projects-item__img">
        </div>

        <div class="projects__item">
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"  class="projects-item__img">
        </div>

        <div class="projects__item">
            <img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png"  class="projects-item__img">
        </div>
    </div>
</section>



.projects {
&__part {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));


  /*DESIRED RESPONSIVE EFFECT:
  h4 {
    margin-left: 22rem;
  }
  margin-left: 35rem;
*/  
}


&-item {

    &__img {
        width: 14rem;
        height: 14rem;
        border-radius: 100%/100%;
    }
}


h4 {
    grid-column: 1 / -1;
}

}

Вот мой код: https://codepen.io/maja5252/pen/XPPaBL?editors=1100#0

Еще раз извините, если формат этого сообщения не правильный.До сих пор не знаю, как разделить мой код на части HTML и CSS:)

Answer 1

Я обнаружил, что мои заголовки H4 нарушали эффект автоподбора, поэтому он работал как эффект автозаполнения.Код отредактирован - я вытащил заголовки из сетки, и он оказался по центру.

@staypuftman - спасибо за ваши советы - я буду помнить их в своей будущей работе.Теперь, когда работает автоподгонка, вы можете увидеть, насколько она отзывчива, без какого-либо медиазапроса.Еще раз спасибо за ваши усилия, чтобы помочь мне.

Answer 2

Пара проблем с вашим кодом:

- Сетка CSS любит контролировать размер своих столбцов, и у вас есть фиксированная высота / ширина на ваших изображениях.Если вы выполните проверку кода DevTools, вы увидите, что ваш 3-й столбец выходит за пределы вашей сетки из-за этого.Я изменил высоту / ширину на 100%/100%.Если вам нужны квадратные изображения, исправьте эту проблему в Photoshop, а не в CSS.

-Центрировать всю сетку довольно просто, все, что вам нужно сделать, это добавить margin: 0 auto, потому что это элемент уровня блока.Но элемент уровня блока занимает 100% ширину области просмотра, поэтому центрирование элемента шириной 100% не даст никакого видимого эффекта.Я установил ширину в 80%, чтобы продемонстрировать, как это может выглядеть по центру, но вы можете использовать любое не 100% значение для этого эффекта.

-Я также не уверен, что вы делаете с auto-fit в вашей сетке.Просто используйте 1fr, и он действительно хорошо работает, а код чистый.

- Я также сделал всю сетку отзывчивой для вас - не уверен, что вы хотите это сделать, но вполне может продемонстрировать это.

Все исправленные проблемы CSS вместе:

.projects {
  margin: 0 25px;

  @media (min-width: 450px) {
    width: 80%;
    margin: 0 auto; 
  }

  &__part {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: 1fr;

    @media (min-width: 450px) and (max-width: 768px) {
      grid-template-columns: 1fr 1fr;
    }

    @media (min-width: 768px) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  &-item {
    &__img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  h4 {
    grid-column: 1 / -1;
  }
}

Демонстрация: https://codepen.io/staypuftman/pen/qMMPwp