当项目少于列时将 CSS 网格居中答案

【问题标题】：Center CSS grid when there are less items than columns当项目少于列时将 CSS 网格居中
【发布时间】：2020-11-09 23:36:04
【问题描述】：

假设我有一个简单的网格，它将项目放在 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)) 拉伸内容而不是居中。

【问题讨论】：

你不能说自动调整，那只会拉伸，你也不能定义一个编号的列数，如果是这样，你将有（比如 4）列并且当一个项目被删除时它只是项目，列仍然存在，您可以在列数中添加一个，并让第一个项目从第二行开始，这会在视觉上居中，但实际上不是
这不是网格布局的工作方式。您定义了 4 列。除非您另外指定，否则您的网格项目仅限于分配给它们的列。 stackoverflow.com/a/50239093/3597276

标签： css css-grid

【解决方案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>

【讨论】：

不，这不是我想要的，因为超过 4 个时它不会包装。