Расположение 5 рядов сетки в центре (с изображением)

Question

Я использую Next.js и SCSS и пытаюсь расположить 5 и 3 строки изображений в центре страницы с помощью адаптивной системы координат.

Мне просто нужно немного отрегулировать расположение изображений с правой стороныно содержимое не перемещается вообще.

вот код:

Next.js

// So basically ui.container wraps up li.item which are images.

<ul className="container">
          {stores.map(store => (
            <li onClick={this.open} key={store.id} className="item">
              <img
                src={store.thumb}
                onClick={() => this.storeDetail(store.id)}
              />
            </li>
          ))}
        </ul>

SCSS

section {
  background: pink;
}

.store-list-title {
  text-align: center;
  padding-top: 2rem;
  font-size: 3rem;
}

.container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(5, 200px);
}

Answer 1

Таким образом, решение, которое я нашел на YouTube, использует функцию mixin в SCSS.

Требуется расчет, поэтому я все еще смотрю на него, чтобы понять, как он работает.

Буду признателен, если кто-нибудь объяснит, как это работает

элемент элемента иmixin

@mixin grid($cols, $mgn) {
  float: left;
  margin-right: $mgn;
  margin-bottom: $mgn;
  width: ((100% - (($cols - 1) * $mgn)) / $cols);
  &:nth-child(#{$cols}n) {
    margin-right: 0;
  }
}

.item {
    @include grid(5, 2%);
    img {
      width: 100%;
    }
  }

li теги

 {stores.map(store => (
            <li onClick={this.open} key={store.id} className="item">
              <img
                src={store.thumb}
                onClick={() => this.storeDetail(store.id)}
                alt={`${store.name} image`}
              />
            </li>
          ))}

Answer 2

Добавить justify-content: center для aligining center

.container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(5, 50px);
  justify-content: center;
}