当项目数少于列数时居中 CSS 网格

Question

假设我有一个简单的网格，它将项目放在 4 列中，填充整个容器宽度：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  justify-content: center;
}

.item {
  height: 100px;
  background-color: red;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

这非常有效，直到我有 3 个或更少的项目。它们被放入相应的单元格中，但由于右侧的单元格是空的，因此在视觉上网格开始看起来“左对齐”。如果容器本身位于页面的中心，这并不酷。

当网格有 3 个或更少的项目时，如何使网格居中？我尝试使用repeat(auto-fit, 25%)但它没有考虑grid-gap到。repeat(auto-fit, minmax(25%, 1fr))拉伸内容而不是居中。

Answer 1

也许这就是您想要的：

它使用自动列而不是模板列。

.grid {
  display: grid;
  grid-auto-columns: 22%;
  grid-gap: 10px;
  justify-content: center;
  width: 200px;
  border: solid 1px black;
  grid-auto-flow: column;
}

.item {
  height: 50px;
  background-color: red;
}

<div class="grid">
  <div class="item"></div>
</div>
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>