html - 如何在 CSS Grid 的最后一行居中放置元素？

Question

我正在使用 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 网格是否适合使用？

Answer 1

CSS 网格不适合整行对齐，因为交叉轨道会挡路。详细解释如下:

• Aligning grid items across the entire row/column (like flex items can)

作为替代方案，使用带有 justify-content: center 的 flexbox。

这会将所有元素打包在行的水平中心。然后你的边距将它们分开。

在完全填充的行上，justify-content 将无效，因为 there's no free space for it to work .

在有空闲空间的行上(在您的例子中，只有最后一行)，元素居中。

#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>