CSS 网格：如何每行制作 3 个项目，但对于有 5 个项目的情况，接下来的 2 个应该放在中心

Question

我有一个案例，现在清单上有 5 项。 在布局上，第一行应有 3 个项目，第二行应有 2 个项目，但位于中间； 我的 CSS 代码不适用于具有 5 个元素的情况，因为第二行从左侧开始。

.items{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  border-radius: 32px;
  border: 1px solid black;
  background: white;
}

Answer 1

我认为你可以为此添加一个课程

.items > .three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.items > .two {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  border-radius: 32px;
  border: 1px solid black;
  background: white;
}