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>

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

1 个答案: