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

Question

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

.container {
  background: lightyellow;
  padding: 10px 20%;
  text-align: center;
}

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

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

.container + .container {
  margin-top: 30px;
}

<div class="container">
  <h1>News</h1>
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

<div class="container">
  <h1>News</h1>
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

如您所见，这非常有效，但前提是我有 4 个或更多项目。如果我的项目较少，它们将被放置到相应的单元格中，但由于右侧单元格为空，视觉上网格开始看起来“左对齐”。如果容器本身位于页面中央，这并不酷，如上面的示例所示。

当网格有 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>

Answer 2

也许这是一个迟到的答案，但这是我想到的：

如果您想使用重复功能使内容自动适合 4 列（在本例中），您所要做的就是：

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 25%);
    justify-content: center;
    justify-items: center;
}

那是因为容器可以说是 100%，如果你想容纳 4 列，那么只需计算 100% 的 1/4，即 25%。

Answer 3

“grid-template-columns”有 25%，但由于卡片之间的间隙，我必须放 20%。

如果没有差距，就增加%。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20%);
  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 class="item"></div>
  <div class="item"></div>
</div>

Answer 4

我认为这需要的是这里使用的技术的变化：

https://www.billerickson.net/css-grid-center-last-item/

该示例可以将单个项目置于两列网格中，并且该示例适用于列表中的最后一个项目，但可以进行调整以适用于更多列。

技巧是使用所需列数的两倍，然后使用 span 将每个项目跨越两列。因此，单个项目本身从第 2 列开始并跨越到第 3 列。

我自己已经成功使用了。