html - 中心定位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;
}