在中心放置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

添加 justify-content：center 来分配中心

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

Answer 2

所以我在youtube上找到的解决方案是在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>
          ))}