如何在CSS网格的最后一行居中放置元素？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在使用CSS网格来布局这样的某些项目…

#container {
  display: grid;
  grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}
.item {
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}
<div id="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

如何使最后一行居中而不是左对齐？我不能保证项目的数量，因此想要使布局适合任何数量的项目。

这是我应该使用flexbox代替的东西吗？还是CSS网格适合使用？

回答：

CSS Grid不适合在整行中对齐，因为纵横交错的轨道阻碍了这种方式。以下是详细说明：

或者，将flexbox与一起使用justify-content: center。

这会将所有项目打包在该行的水平中心。然后，您的利润将它们推开。

在完全填充的行上，justify-content将没有任何效果，因为没有可用空间来工作。

在具有可用空间的行（在您的情况下，仅最后一行）中，项目居中。

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}
* {
  box-sizing: border-box;
}
<div id="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

以上是 如何在CSS网格的最后一行居中放置元素？ 的全部内容， 来源链接： utcz.com/qa/422472.html

回到顶部